C
Csaba Gabor
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
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