Question

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

至少有一种处理方式。

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

let onMove = event => {
    //either touch, or mouse
};

document.body.addEventListener('touchmove', event=>{
    //prevent mouse if this event fires
    event.preventDefault();
    onMove(event);
}, false);

document.body.addEventListener('mousemove', event=>{
    onMove(event);
}, false);

如果相反，我们这样做（第二种方式）怎么办？

let didTouch = false;

let onMove = event => {
    //either touch, or mouse
};

document.body.addEventListener('touchmove', event=>{
    didTouch = true;
    onMove(event);
}, false);

document.body.addEventListener('mousemove', event=>{
    if(didTouch){
        didTouch = false;
    }else{
        onMove(event);
    }
}, false);

处理触摸和鼠标的第二种方法是否可行？建议使用第一种方法，但只要没有不可预见的问题，我对使用这两种方法的可能性很感兴趣。

Answer 1

我认为第二种方法不是很好的解决方案，因为：

性能：您正在处理2个事件（触摸和鼠标）。第一种解决方案可防止触发鼠标事件，因此您的应用程序将减少事件处理。
复杂性：didTouch正在给代码增加不必要的复杂性……作为一般的经验法则，如果可以通过编写更少的代码来获得相同的结果，则首选较短的解决方案，除非使用更长的解决方案确实有好处。

要记住的另一个潜在问题是互斥。 JavaScript is Thread Safe，而您仍在处理第一个事件时，您不必担心会触发第二个事件并更改didTouch标志。但是请记住，使用异步方法遇到互斥体问题并非不可能。

Answer 2

我曾经遇到这个问题，但是在发生其他事件时，请检查我的解决方案：

.mapValues()

preventDefault与是否检查跳过处理鼠标和触摸？

2 个答案: