如何仅在使用 pen/stylus 而不是手指触摸时停止滚动

Question

我正在开发一个网络应用程序，它需要防止使用手写笔滚动，但仍然允许用手指滑动屏幕时滚动。

我运行遇到的问题是只有 pointerstart 事件可以通过 e.pointerType 区分手指触摸和手写笔触摸。

但似乎无法从指针向下停止滚动，需要使用无法检测手指与stylus/pen之间差异的touchstart。

On Google Keep 这是通过设置 css touch-events:none;在 canvas 上，如果是手指触摸，则使用指针事件生成模拟平移，但这看起来很老套。

我要实现的示例代码

canvasElement.addEventlistener("pointerdown", function(event){
  if(event.pointerType === "pen"){
    // Disable scroll - This doesn't work
    event.preventDefault();
    event.stopPropagation();
    // Start drawing stuff
    startDrawing(...);
  } else {
    // Is a touch event do nothing, let it scroll naturally
  }
});

有什么方法可以不模拟卷轴吗？

Answer 1

我实际上想出了如何做到这一点，有人可能会认为一种可能的方法是仅当 pointerdown 是手写笔时才有条件地设置 touch-action: none css 属性，但是不起作用，设置 css 当 pointerdown 已经太迟并且滚动将在之后启动。

我最终这样做的方式是我有一个指针按下侦听器来检测手写笔，将其存储为一个变量，然后在它之后触发一个 touchstart 监听器，仅当最后一个指针按下是手写笔时才防止默认。

var isPen = false;

document.body.addEventListener("pointerdown", function(e){
  if(e.pointerType === "pen"){
    isPen = true;
    console.log("draw");
  } else {
    isPen = false;
  }
  e.preventDefault();
}, {
  capture: true
});

document.body.addEventListener("touchstart", function(e){
  if(isPen){
     e.preventDefault();
     }
}, {
  passive: false,
  capture: false
});

在这里试试看： https://codepen.io/crfounder/pen/GQEXZM

如何仅在使用 pen/stylus 而不是手指触摸时停止滚动

How to stop scrolling only on using pen/stylus and not on finger touch

javascript

mobile

event-listener

touch

pointer-events