Javascript 在移动设备上取消设定点捕捉/手势接管

我无法在移动设备上获取

setPointerCapture

：捕获总是被取消。我主要使用Chrome进行测试，使用远程调试工具

我调用

setPointerCapture

响应

pointerMove

事件。我还：

• 在页面中的所有元素上设置触摸操作：无
• 对所有指针事件调用

  event.preventDefault

  （侦听

  pointermove

  ，

  pointerup

  ，

  pointercancel

  ，

  pointerdown

  ）

但当我点击并拖动时，在几个像素和浏览器的手势被激活后，捕获将被取消

禁用手势和跟踪指针移动的正确方法是什么？

---

相关的代码位如下所示

    element.onpointerdown = (ev) => {
        ev.stopPropagation()
        pointer_id = ev.pointerId
        target.setPointerCapture(pointer_id)
        target.addEventListener('pointermove', on_mouse_move)
        target.addEventListener('pointerup', on_mouse_up)
        target.addEventListener('pointercancel', on_pointer_cancel)
    }

target

是另一个我想捕捉鼠标内部移动的元素

---

其中，所有消息处理程序对事件调用

preventDefault

。在每个控制台中放置一个console.log，我可以看到一些移动，然后是一个取消。

在经过艰苦的调试后，这种不顾一切的措施可能最终会起作用，但通常一个

触摸操作：在
主体上没有
就足以禁用触摸并使指针捕获工作，如果没有的话，然后，您可以对文档上的
touchstart
事件执行
preventDefault
，并使用选项
{capture:true，passive:false}
。无论如何，把
event.preventDefault
放在所有地方都不是一个好的做法


const A=document.getElementById（'A'）；
常量B=document.getElementById（'B'）；
const ptrLog=e=>console.log（performance.now（），e.target.id，e.type）；
常数ptrMove=e=>{
ptrLog（e）；
const{x，y，width，height}=e.target.getBoundingClientRect（）；
B.风格转变=
`翻译3d(
${e.clientX-x-width/2}px，
${e.clientY-y-高度*1.5}px，
0)`;
};
A.addEventListener（'gotpointercapture'，e=>{
ptrLog（e）；
});
A.addEventListener（'lostpointercapture'，e=>{
ptrLog（e）；
A.removeEventListener（'pointermove'，ptrmmove）；
A.removeEventListener（'pointerup'，ptrLog）；
A.removeEventListener（'pointercancel'，ptrLog）；
});
B.addEventListener（'pointerdown'，e=>{
ptrLog（e）；
A.setPointerCapture（即指针ID）；
A.addEventListener（'pointermove'，ptrMove）；
A.addEventListener（'pointerup'，ptrLog）；
A.addEventListener（'pointercancel'，ptrLog）；
});
document.addEventListener（'touchstart'，e=>{
e、 预防默认值（）；
}，{捕获：真，被动：假}）
正文{
背景：黑色；
触摸动作：无；
}
#A、 #B{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：2米；
高度：2米；
字号：3em；
用户选择：无；
}
#A{背景：红色；}
#B{背景：蓝色；}
A
B
你能展示你如何使用设置点捕获的代码吗？@syduki添加了我使用的基本代码。什么是
目标
，
上下文
？您是否尝试过这样设置：
ev.target.setPointerCapture（ev.pointer\u id）
？@syduki抱歉，我删除了上下文，它只是我存储指针id的地方。我不想捕获到
ev.target
，因此
target
是另一个元素。
ev.target
是被拖动的元素，因此在该元素中移动鼠标没有帮助。我还进行了实验，发现放置一个取消事件的
touchstart
似乎有帮助，至少对Chrome来说是这样。在我的代码中，Firefox上仍然存在一些问题；我得调试一下。虽然这感觉有点不对劲，但似乎没有更好的解决方案。不过，我将touchstart事件限制在我捕获的元素上，并且仅限于捕获期间