"bug" with onclick handlers in IE
I had an issue today with Internet Explorer. An object with an onClick handler worked fine in Firefox and Safari, but in IE the handler only fired every other click. In the course of debugging I discovered that if I clicked slowly, it worked on every click. I realized that this was because IE must be registering an onDblClick event instead of two onClick events. A little testing confirmed this. I searched to see if someone else had the same problem, and found this page. User jamescover had the same issue and found a solution: use the onMouseUp event to handle clicks instead of onClick. He also directed the focus in the onMouseDown event, but I found that part to be unnecessary in my application. A demo of his solution can be found here. I’ll reproduce the code in this post in case that page ever gets taken down:
<script type=”text/javascript”>
<!–
var x = 0;
function addX(){
document['oFrm']['num'].value = x;
x++;
}
var y = 0;
function addY(){
document['oFrm2']['num2'].value = y;
y++;
}
//–>
</script>
This one invokes the function <b>onclick</b>
<form name=”oFrm”>
<input type=”text” name=”num” size=”5″ />
<input type=”button” value=”add” onclick=”addX();” />
</form>
This one focuses the text field <b>onmousedown</b>, then invokes the function <b>onmouseup</b>
<form name=”oFrm2″>
<input type=”text” name=”num2″ size=”5″ />
<input type=”button” value=”add” onmousedown=”this.focus();” onmouseup=”addY();” />
</form>
Tags: development, internet, microsoft, software, technology, web applications
June 26th, 2008 at 10:55 am
Hey!
I’ve ran into this problem before as well. You may have better luck with an Event Observer on a particular element, rather than a literal onclick statement.
http://prototypejs.org/api/element#method-observe
June 26th, 2008 at 3:09 pm
The reason is that IE goofed on the events front with double-click.
(e.g. Prototype.js isn’t doing anything wrong, IE just sucks)
The bug is listed here
http://webbugtrack.blogspot.com/2008/01/bug-263-beware-of-doubleclick-in-ie.html
Unfortunately it ends up busting a bunch of things if you aren’t aware of the bug.
April 3rd, 2009 at 11:48 am
@Clive - Thanks man! that is exactly what I was experiencing on my end. I found this article when Googling and as you noted I’m using jQuery but it was still happening to me too. Will the blue e ever be fixed?