PanZoom捕捉润色事件

Question

我正在使用Panzoom JS放大地图。它的工作方式正是我在手机和桌面上放大和缩小所需要的。当你点击地图上的一个项目时，我会在考虑到所应用的任何比例的情况下，获取相对于容器左上角的x/y坐标，然后在数据库中查找该位置/页面并打开它。这一切在桌面上都很好，但在触摸上不太好。我需要能够捕捉到触摸位置(就像你用鼠标点击一样(，但前提是没有触摸移动，这样我就可以区分平移/移动、捏/缩放和点击/触摸(点击(。我找不到任何文件来解决这个问题。如有任何帮助，我们将不胜感激。

const elem = document.getElementById('map_inner_cont')

window.panzoom = panzoom(elem, {
zoomDoubleClickSpeed: 1,
autocenter  : true,
bounds      : true,
initialZoom : 0.2,
animate     : true,
maxZoom     : 2
})

Answer 1

有趣的是，深入研究panzoom，我可以看到您正在管理三组不同的事件：

var events;
if (typeof window.PointerEvent === 'function') {
events = {
down: 'pointerdown',
move: 'pointermove',
up: 'pointerup pointerleave pointercancel'
};
}
else if (typeof window.TouchEvent === 'function') {
events = {
down: 'touchstart',
move: 'touchmove',
up: 'touchend touchcancel'
};
}
else {
events = {
down: 'mousedown',
move: 'mousemove',
up: 'mouseup mouseleave'
};
}

我的猜测是，pointerdown的event.prventDefault((不会影响点击，而在旧设备上的touchstart会影响点击，这就是为什么我们看到不同的行为。

我的诱惑是使用上面使用的相同块来改变我们正在收听的事件类型，这样传播是相同的，但这似乎有点脆弱。

我更希望panzoom可以选择性地将类似点击的事件作为点击传递给它的孩子，也许吧？如果有意义的话，我可以试着围绕这一点创建一个公关。

例如Panzoom(｛propagateClicks:true｝(