svg click event not bubbling

[Peter Rust]

D3ers,

 

Has anyone had problems with click events intermittently not bubbling?

 

I created a tiny hobby SVG Drawing app (https://github.com/prust/svg-drawing) and the one remaining bug is that occasionally the click events don’t seem to fire. There’s no error printed to the chrome dev tools console; it’s as if the click event just doesn’t bubble. It seems to occur when my click happens to be on one of the grid lines or at the intersection of the grid lines.

 

It happens frequently enough to be noticeable (at least once every ten clicks if I’m trying to do it), but when I stick a breakpoint inside the click handler, I haven’t been able to reproduce the problem. I originally used a jQuery “on” handler – I recently switched to d3.on() but the problem persists. I’ve tried attaching to the SVG element and the document element. I’m starting to run out of ideas.

 

Anyone have suggestions?

 

-- peter rust

Developer, Cornerstone Systems

[Tore Nauta]

Hi Peter,

Is this related to the mouse being moved while trying to click? See for example: http://www.quirksmode.org/js/events_mouse.html

Tore

In general mousedown and mouseup are more useful than click. Some browsers don’t allow you to read out mouse button information onclick. Furthermore, sometimes the user does something with his mouse but noclick event follows.

Suppose the user depresses the mouse button on a link, then moves his mouse off the link and then releases the mouse button. Now the link only registers a mousedown event. Similarly, if the user depresses the mouse button, then moves the mouse over a link and then releases the mouse button, the link only registers a mouseup. In neither case does a clickevent fire.

Whether or not this is a problem depends on the user interaction you want. But you should generally register your script onmousedown/up, unless you’re completely sure you want the click event and nothing else.

[Peter Rust]

That was exactly the problem, Tore -- thank you!

If the mousedown happened on a grid line and the mouseup did not -- or vice versa -- the click event would not fire.

This bug is now fixed -- thanks again, that was a huge help.

-- peter