Enable mouseup / mousedown but prevent click behavior

Question

I have a data visualization here (the second one):

http://mikeheavers.com/main/work

If you click on the circles representing skill fields, it reveals inner green circles with the particular skills. If you hold down on the green circles representing the skills, they animate, grow, and then shrink back on mouse release. However, if you simply click on the circles, they grow, but do not return to their previous size (the mousedown is not registered I guess) - which results in a circle that will constantly get bigger each time it is clicked.

Is there a way to prevent click behaviour, either through d3 or through Javascript / jQuery? I only want mouseup and mousedown .

Answer 1

I'm observing different behavior than what you described.

• If you single click a circle, it doesn't matter how long the click is (whether it's held or not), it returns back to its original size.
• If you click a circle repeatedly and quickly, this is when it starts to grow and does not return to its original size.
• If you hold down a circle and then move your mouse outside of it, it both stays pink and doesn't return to its original size.

I think attaching a simple .on('mouseout', handler) to return spheres to their original size will solve the last issue, which is pretty glaring, and any missed mouseup events due to moving outside. You can also attach a mouseup to the whole document ( d3.select('body').on('mouseup', handler) ), which will catch any such event; then you would just need to record the last sphere that was clicked.

Additionally, to fix your original problem, you can make sure that mouseup events are triggered by adding e.preventDefault() in the mousedown events. This will prevent fast clicks from turning into double-clicks or other events by the browser.

Other posts that discuss these issues:

• mouseup event isn't always triggered
• mouseUp event on drag