svgPanZoom: Disable click listener when panning

Question

This is a library-specific question for ariutta/svg-pan-zoom.

I've got an SVG element with some <a> tags. Via jQuery, I handle clicks on those elements: $('svg').on('click', 'a', function() { ... }).

Now I added the library mentioned above for zooming and panning the SVG element. That works great, except every time i pan when the cursor is on an a element, it fires the click listener.

How can I prevent the listener from firing when the mouseup resulted from a pan?

score 2 · Answer 1 · answered May 26 '15 at 15:28

Could be too late for you, nevertheless, I would like to share my solution:

I use beforePan to set a property, that click is currently disabled.

In the click eventhandler, I check the property, if click is currently disabled. If so, do not perform any action, but set the property back. The next time, the click eventhandler is called, when you actually click, the click action is performed normally.

    beforePan: function(oldPan, newPan) {
        svgPolygons.clickDisabled = true;
    },


    function clickerHandler() {
        if (!svgPolygons.clickDisabled) {
             // perform click action
        } else {
            // enable click again
            svgPolygons.clickDisabled = false;
        }
    }

In the code above, svgPolygons is an element from the SVG which I use to store the property. But of course, any other place could be used to store if click is currently disabled.

score 0 · Answer 2 · answered Feb 15 '15 at 16:28

What you can try is to add your custom events handlers to svgPanZoom like in custom events handler example

You should hook mousedown, mousemove and mouseup events. The order of things should be like that:

Hook into clicks before library starts
on mousedown set a flag that click may happen (e.g. willClick = true)
on mousemove disable jquery listener and set your flag to false
on mouseup check if flag is false and enable jquery listener

This way there will be 2 scenarios:

If user only clicks:
- mousedown is fired
- mouseup is fired
- click is fired
If user pans:
- mousedown is fired
- mousemove is fired and listener is disabled (possibly multiple times)
- mouseup is fired and listener is reenabled

Now I'm not sure if the prevention of click will really work as it depends on the order of events and how jQuery stores events history internally (if it does that).

Another way would be to set a global flag wasPanned on mousemove event and inside of your jquery callback to check against this flag and to reset it.

svgPanZoom: Disable click listener when panning

2 Answers2