如何仅在使用笔/手写笔上停止滚动，而不是在手指触摸上滚动

Question

我正在使用Web应用程序，该应用需要防止使用手写笔滚动，但仍允许用手指在屏幕上滚动。

我遇到的问题是，只有PointerStart事件才能通过E.PointerType区分手指触摸和手写笔触摸。

，但似乎不可能停止滚动滚动的滚动，并且需要使用无法检测到手指和手写笔/笔之间的区别的touchstart。

在Google上保持这一点是通过设置CSS触摸事件来实现的：无；在画布上，并使用指针事件在手指触摸时生成模拟平板，但这似乎是骇人听闻的。

我想实现的示例代码

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

我实际上弄清楚了如何做到这一点，人们可能会认为一种可能的方法是设置触摸功能：无条件css属性仅在pointerdown是手写笔是有条件的，但这无效，设置CSS时，当Potterdown已经为时已晚，并且滚动将在之后启动。

我最终这样做的方式是，我有一个指针侦听器来检测手写笔，将其作为变量存储，然后将其触发的侦听器存储在触发之后才能防止默认值的触摸台听众。>

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