问题描述
我在可滚动区域中有一堆子 div，如下所示：
<div style='overflow: scroll;'>
<div id='a' />
<div id='b' />
<div id='c' />
...
</div>
我在每个子节点上监听 pointerdown 事件，当一个子节点触发时，我在文档上设置 pointermove 处理程序。例如：
const pointerdownHandle = e => {
e.target.releasePointerCapture(e.pointerId)
document.addEventListener('pointermove',pointermoveHandle)
document.addEventListener('pointerup',pointerupHandle)
}
const pointermoveHandle = e => { ... }
const pointerupHandle = {
document.removeEventListener('pointermove',pointermoveHandle)
document.removeEventListener('pointerup',pointerupHandle)
}
document.getElementById('a').addEventListener('pointerdown',pointerdownHandle)
这在桌面和 iOS Safari 上效果很好。然而，在 Android Chrome 上，pointercancel 事件几乎立即触发，破坏了一切。
这似乎是 the expected behaviour: “当浏览器确定不太可能再有任何指针事件时，就会触发指针取消事件，或者如果在触发指针向下事件之后，指针被用于操作通过平移、缩放或滚动视口。”
推荐的解决方案是将 css 属性“touch-action: none”应用到父元素。这有效。然而不幸的是，这也会破坏滚动，因为现在触摸操作被忽略了。
我已经尝试在 pointerdown 事件触发后以编程方式应用 css 属性，但这不起作用。也不会将 preventDefault / stopPropagation 添加到 pointermoveHandle。
有没有人解决过这个问题？如何在不禁用父元素上的滚动的情况下阻止指针取消事件触发？
（我意识到我可以依靠触摸事件，但是支持 pointerenter 和 pointerleave 的指针事件使用起来更简单、更清晰。）
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）