click event bubbles down on panend

[AskAlice]

When I'm finished dragging, if my mouse is over an element with a click event listener, the event listener is fired. I would like it to only fire if I'm not actually dragging.

How an I do this?

I tried

    this.panzoom.on('panend', (e) => {
      e.stopPropagation();
    });

but this is actually the opposite of what is needed, as it still bubbles down and also no longer ends panning.

I'd like to avoid forking this lib if possible

[cescocesco]

When I'm finished dragging, if my mouse is over an element with a click event listener, the event listener is fired. I would like it to only fire if I'm not actually dragging.

How an I do this?

I tried

    this.panzoom.on('panend', (e) => {
      e.stopPropagation();
    });

but this is actually the opposite of what is needed, as it still bubbles down and also no longer ends panning.

I'd like to avoid forking this lib if possible

Have you found a solution?

[Achuttarsing]

hello! I have the same issue! Any workaround?

[VictorDementiev]

I use the next solution:

var element = document.querySelector('#content');
var instance = panzoom(element, {
  maxZoom: 1,
  minZoom: 0.1,
  bounds: true,
  smoothScroll: false,
  zoomDoubleClickSpeed: 1
});

var regex = /matrix\(\d+(?:\.\d+)?, \d+(?:\.\d+)?, \d+(?:\.\d+)?, \d+(?:\.\d+)?, (-?\d+(?:\.\d+)?), (-?\d+(?:\.\d+)?)\)/;

// get current container position
    var transformMatrixValue = getComputedStyle(element).transform;
    var match1 = transformMatrixValue.match(regex);
    var x1 = Number(match1[1]);
    var y1 = Number(match1[2]);`

In the block, where you processing a click you should calculate new values of the position:

var currentTransformMatrixValue = getComputedStyle(element).transform;
        var match2 = currentTransformMatrixValue.match(regex);
        var x2 = Number(match2[1]);
        var y2 = Number(match2[2]);

Then just compair them:

if (Math.abs(x1 - x2) < 3 && Math.abs(y1 - y2) < 3) {
// the shift was in the area of error (up to 2 pixels in x or y) - we process the click
}
else{
// the shift is more than 2px - don't process the click
}

[bonatoc]

The bug is in the demo:

https://anvaka.github.io/panzoom/demo/index.html

I agree, this should be taken care of by panzoom itself.