PanZoom 捕捉 Touch Up 事件

Question

我正在使用 Panzoom JS 来放大地图。它的工作方式正是我在移动设备和台式机上放大和缩小所需的方式。当您单击地图上的项目时，我会获取相对于容器左上角的 x/y 坐标，同时考虑应用的任何比例，然后在数据库中查找 location/page 并将其打开。这一切在桌面上都很好用，但在触摸时却不行。我需要能够捕捉到触摸位置（就像您用鼠标单击一样）但前提是没有触摸移动，所以我可以区分 pan/move、pinch/zoom和 tap/touch-up（点击）。我找不到任何文件来解决这个问题。任何帮助将不胜感激。

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'
    };
}

我猜 event.preventDefault() for pointerdown 不会影响点击，而旧设备上的 touchstart 会，这就是我们看到不同行为的原因。

我很想使用上面使用的相同块来更改我们正在侦听的事件类型，因此传播是相同的，但这似乎有点脆弱。

我希望 panzoom 可以选择将 click-like 事件作为对其 children 的点击向下传递，也许吧？如果有意义的话，我可以尝试围绕它创建一个 PR。

例如Panzoom({ propagateClicks: true })

PanZoom 捕捉 Touch Up 事件

PanZoom catch Touch Up event

javascript

jquery

svgpanzoom

panzoom