Javascript PanZoom catch Touch Up 事件

发布于02月10日

我正在使用Panzoom JS放大 map .它的工作方式正是我在移动和桌面上放大和缩小所需要的.当您单击 map 上的某个项目时，考虑到应用的任何比例，我会获取相对于容器左上角的x/y坐标，然后在数据库中查找该位置/页面并将其打开.这一切在桌面上都很管用，但在touch 屏上就不行了.我需要能够捕捉到修饰位置(就像你用鼠标点击一样)，但只有在没有touch 移动的情况下才能捕捉，这样我才能区分平移/移动、捏/zoom 和轻拍/修饰(单击).我找不到任何文件来解决这个问题.任何帮助都将不胜感激.

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

推荐答案

有趣的是，仔细研究一下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.PrevenentDefault()不会影响单击，而旧设备上的Touchstart会影响点击，这就是为什么我们会看到不同的行为.

我忍不住想用上面用过的这个挡路来改变我们收听的事件类型，这样传播是一样的，但是这看起来有点脆弱.

也许，我更希望Panzoom可以有 Select 地将类似单击的事件作为单击传递给它的子项.如果有意义的话，我可以试着做个公关.

例如，Panzoom({PropagateClicks:true})

Javascript PanZoom catch Touch Up 事件

推荐答案

Javascript相关问答推荐

如果被1个Phaser JS抵消，我的倾斜碰撞

我无法使用tailwind-css和reactJS修改图像的位置

HTML/JavaScript函数未执行

Express.js：以块形式发送响应

自定义帖子类型帖子未显示在网站上

为什么子组件没有在reaction中渲染？

为什么在获取回调内设置状态(不会)会导致无限循环？

在JavaScript中检索一些文本

JS生成具有给定数字和幻灯片计数的数组子集

使用useup时，React-Redux无法找到Redux上下文值

IMDB使用 puppeteer 加载更多按钮(nodejs)

JS：XML insertBefore插入元素

环境值在.js文件/Next.js中不起作用

如何在Press上重新启动EXPO-AV视频？

expo 联系人：如果联系人的状态被拒绝，则请求访问联系人的权限

使用Document.Evaluate() Select 一个包含撇号的HTML元素

在表单集中保存更改时删除'；禁用'；

当我点击一个按钮后按回车键时，如何阻止它再次被点击

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)？如果是这样的话，是如何做到的呢？

按特定顺序将4个数组组合在一起，按ID分组