preventDefault与if检查跳过处理鼠标和触摸事件的对比？

12 浏览
0 Comments

preventDefault与if检查跳过处理鼠标和触摸事件的对比？

假设我想同时使用触摸和鼠标（鼠标和触摸屏可能都可用）。

至少有一种方法可以处理。

当触摸事件触发时，使用preventDefault（第一种方法）：

let onMove = event => {
    //触摸或鼠标事件
};
document.body.addEventListener('touchmove'， event=>{
    //如果触发了此事件，阻止鼠标事件
    event.preventDefault();
    onMove(event);
}， false);
document.body.addEventListener('mousemove'， event=>{
    onMove(event);
}， false);

如果我们这样做会怎样（第二种方法）：

let didTouch = false;
let onMove = event => {
    //触摸或鼠标事件
};
document.body.addEventListener('touchmove'， event=>{
    didTouch = true;
    onMove(event);
}， false);
document.body.addEventListener('mousemove'， event=>{
    if(didTouch){
        didTouch = false;
    }else{
        onMove(event);
    }
}， false);

第二种方法是否适用于处理触摸和鼠标？第一种方法被推荐，但我对使用任何一种方法都感兴趣，只要没有意想不到的问题。

0

2 答案

0 Comments

preventDefault versus if check skip handling mouse and touch?

在我看来，第二种方法并不是一个好的解决方案，因为：

  1. 性能：你需要处理两个事件（触摸和鼠标）。第一种解决方案阻止了鼠标事件的触发，因此你的应用程序处理的事件更少。
  2. 复杂性：didTouch 给你的代码增加了不必要的复杂性...通常来说，如果你可以用更少的代码达到相同的结果，那么较短的解决方案更好，除非使用较长的解决方案有明显的好处。

还要注意的另一个潜在问题是互斥性。JavaScript 是线程安全的，你不需要担心在处理第一个事件时第二个事件触发并改变了你的 didTouch 标志位。但要记住，使用异步方法可能会遇到互斥问题。

我认为这基本上回答了我的问题。这样做是否基本上安全？如果我为任何 didTouch 变量保持良好的局部范围，你认为互斥问题可以避免吗？

我的建议是不要使用第二种方法...因为性能、复杂性和潜在的互斥问题...我不是这方面的专家，但我看过这个问题的所有文档，都使用了第一种方法...不确定为什么你想使用这个第二种方法？有什么好处吗？

我对将指针事件与自动滚动相结合很感兴趣。比如在一个滚动框中使用拖动，使用左鼠标按钮和滚轮不方便，或者行为只是预期但对触摸不可用。这是一个非常特殊的问题，为了正确处理，需要记录指针设备的每个像素移动的位置。使用触摸和鼠标的主要原因是与其他选择阻止默认行为的库兼容，这样无论如何都会停止鼠标事件，还有其他问题，比如直径精度。

0
0 Comments

问题的原因是当鼠标和触摸监视器交替使用时，上述代码只能适用于其中一种事件（mousedown或touchstart），而不能同时适用于两种事件。

解决方法是使用event.preventDefault()来阻止事件的默认行为，从而避免同时处理鼠标和触摸事件。具体实现方法如下：

let handler = function (e) {
  e.preventDefault(); // 阻止事件的默认行为
  // do stuff
};
key.addEventListener('touchstart', handler);
key.addEventListener('mousedown', handler);

通过在事件处理函数中调用event.preventDefault()，可以确保当鼠标和触摸事件同时触发时，只执行其中一个事件处理函数，而不会同时处理两个事件。

这样，无论是使用鼠标还是触摸屏，都可以正确地处理事件。

0