onChange onClick conflict?!?

Discussion in 'Javascript' started by Csaba Gabor, May 1, 2004.

  1. Csaba Gabor

    Csaba Gabor Guest

    I am getting a BIZARRE situation where the onClick button handler
    is not firing if there is an onChange handler for a textbox. Consider:

    <html><head><title>onChange onClick conflict</title></head>
    <body>
    <form name=test>
    <input name=foo onChange="alert('Changed')">
    <button accessKey=B type=button
    onClick="alert('Button')"><u>B</u>utton</button>
    </form>
    Notice that clicking on the button once a change is made will
    only result in the Changed alert box. However, using the
    accessKey of B will result in both Changed and Button alerts
    (though in opposite order on IE 6 vs. Opera 7.23 on Win 2K)
    </body>
    </html>


    However, if the alert is missing from the onChange handler,
    then the onClick handler fires. Consider the very similar:

    <html><head><title>onChange onClick conflict</title></head>
    <body>
    <form name=test>
    <input name=foo
    onChange="this.style.color = (this.style.color=='red' ? 'blue' : 'red')">
    <button accessKey=B type=button
    onClick="alert('Button')"><u>B</u>utton</button>
    </form>
    Notice that clicking on the button once a change is made will
    result in a color change AND the Button alert box
    </body>
    </html>


    Am I missing something really obvious here? Cause right now
    this behaviour is making no sense to me... The second example
    shows that Button's onClick really would like to fire. So, even
    though this is already confusing to me, I get the idea that perhaps
    that onClick is waiting for the onChange to finish up. Or maybe
    it's an alert conflict (OK, we're grasping at straws now). So I
    introduce the time honored way of dealing with this: setTimeout:

    <html><head><title>onChange onClick weirdness</title></head>
    <form name=test>
    <input name=foo
    onChange="window.foo='Changed';window.setTimeout('alert(window.foo)',10);">
    <button type=button accessKey=B
    onClick="document.getElementById('disp').innerHTML += 'X'">
    <u>B</u>utton</button>
    <div id=disp></div>
    </form></body></html>

    Even though I've removed the onClick alert (which I've replaced by writing
    to a DIV) and put in a setTimeout, I'm still not seeing the onClick handler
    fire!
    BUT WAIT, increase that timeout from 10 to 1000 and the X gets appended
    to the DIV every time. WHAT AM I MISSING?!? Oh, and if I set the
    timeout to 100 Opera writes the DIV every time, but IE only does it
    sometimes.

    Thanks for any enlightenment,
    Csaba Gabor
     
    Csaba Gabor, May 1, 2004
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.