4

我正在使用 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
})
4

1 回答 1

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.preventDefault() 不会影响点击，而旧设备上的 touchstart 会，这就是我们看到不同行为的原因。

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

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

例如 Panzoom({propagateClicks: true })

于 2022-02-10T07:33:12.417 回答