Javascript 动态禁用SVG元素的触摸操作（overscroll）

我在Chrome上的触摸屏过度滚动有问题

我有一个包含am SVG元素的文档，其中包含一些形状，例如矩形：

现在，我想使矩形成为可拖动的，这意味着我想通过设置其样式属性

touch action:none

来禁用相应

元素上的各种触摸操作

这在除Chrome之外的所有桌面浏览器上都能正常工作。在Chrome上，当我在一个矩形上触摸和移动时，浏览器的overscroll功能开始发挥作用。这会导致浏览器窗口笨拙地移动，并且取消了我在矩形上设置的所有指针事件

也就是说，

pointermove

被注册了几分之一秒，然后当overscroll进入时它就停止了

pointerup

即使在释放触摸时也不会被调用

现在，如果我有一个HTML元素而不是SVG元素，那么设置

touch action:none

就可以了。SVG元素上的相同操作失败

从技术上讲，这可以通过在

document.body

上设置

touch action:none

或将整个SVG包装到一个

元素中并设置

touch action:none

来解决

不幸的是，这对我来说不是一个选项，因为我需要文档（以及围绕SVG的其余矩形）保留其所有原始触摸手势，除非直接在矩形上

// Get element
var o = document.getElementById( "test" );

// disable touch action on press of the SVG element
o.addEventListener( "pointerdown", function(e) {
  document.body.style.touchAction = "none";
} );

// re-enable touch action when released
o.addEventListener( "pointerup", function(e) {
  document.body.style.touchAction = "auto";
} );

作为一种解决方案，当矩形上发生

pointerdown

事件时，我尝试在

document:body

上动态设置

touch action:none

// Get element
var o = document.getElementById( "test" );

// disable touch action on press of the SVG element
o.addEventListener( "pointerdown", function(e) {
  document.body.style.touchAction = "none";
} );

// re-enable touch action when released
o.addEventListener( "pointerup", function(e) {
  document.body.style.touchAction = "auto";
} );

不幸的是，这没有帮助。body上的样式将被设置，下次我尝试拖动矩形时，它将按预期工作（因为

pointerup

event永远不会执行），只是这次不行

将

preventDefault（）

添加到事件处理程序也没有效果

如果有类似经验的人能够分享解决方案，我将不胜感激

这里有一个以上的实例

//获取元素
var o=document.getElementById（“测试”）；
//按下SVG元素时禁用触摸操作
o、 addEventListener（“pointerdown”，函数（e）{
document.body.style.touchAction=“无”；
} );
//释放时重新启用触摸操作
o、 addEventListener（“pointerup”，函数（e）{
document.body.style.touchAction=“自动”；
} );
我认为阻止touchstart

就足够了：

window.addEventListener( "touchstart", function(e) {
  // Determine wether or not you are panning from rectangle:
  if (e.target ....)
      e.preventDefault();
} );

---

该示例是否仅适用于触摸屏？我不能移动你的长方形。顺便问一下，您是否尝试过

preventDefault

在按下矩形时触发平移的事件？是的，它仅与触摸屏相关。而且，为了简单起见，实际移动矩形的代码不在那里，因为它超出了点。还有，是的，我尝试了

preventDefault（）

-谢谢你提醒我，我会更新你在哪些事件中阻止了我的问题？@lilezek

pointerdown

Hm，看起来在

touchtstart

事件中有

preventDefault（）

。将

touchstart`和
pointerdown都设置为
似乎是错误的，只是为了防止出现这种情况：（没有这样的事件，
pandown
，或者我遗漏了什么？对不起，我错了。pandown是一个离子事件。你必须使用touchstart.Gotcha。更新了我的问题。touchstart似乎起到了作用。但是，仅仅为了Chrome的功能而使用这两个事件似乎是错误的，还是一个bug？你是说两者都是
吗rdown
和
touchstart
？您确定也需要防止
pointerdown
吗？我需要为许多其他活动捕获
pointerdown
事件。当然，我更喜欢在其中包含
preventDefault（）
，而不是单独的
touchstart
。