Why doesn’t click event always fire?

I recently came across this again, and fortunately have managed to isolate the problem and work around it.

It was actually due to something being registered in the mousedown event, which was moving the DOM element svg:circle to the top based on a z-order. It does this by taking it out the DOM and re-inserting it at the appropriate place.

This produces something that flows like this:

  • mouseenter
  • mousedown
    • (move DOM element but keep same event wrapper)
    • mouseup

The problem is, as far as the browser is concerned the mousedown and mouseup occurred almost on different elements in the DOM, moving it has messed up the event model.

Therefore in my case I’ve applied a fix by firing the click event manually on mouseup if the original mousedown occured within the same element.

Leave a Comment