PanZoom捕捉触摸事件

Question

我正在使用Panzoom放大地图。它的工作方式，我需要它放大和移动和桌面。当您单击地图上的某个项目时，我会在考虑到所应用的任何比例的情况下，获取相对于容器左上角的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

有趣的是，深入研究Pan缩放一下，我可以看到你正在管理三个不同的事件：

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()对于pointerdown并不会影响点击，而旧设备上的touchstart就会影响，这就是为什么我们看到了不同的行为。

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

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

例如Pan缩放({ propagateClicks: true })