时间戳

首页 > 解决方案 > preventDefault 与 if 检查跳过处理鼠标和触摸？

javascript - preventDefault 与 if 检查跳过处理鼠标和触摸？

问题描述

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

至少有一种处理方式。

当触摸触发时使用 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);

第二种方法可以同时处理触摸和鼠标吗？推荐第一种方式，但我对使用任何一种方式的可能性感兴趣，只要没有不可预见的问题。

标签： javascripttouchmousedom-events

解决方案

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

  1. 性能：您正在处理 2 个事件（触摸和鼠标）。第一个解决方案防止鼠标事件触发，因此您的应用程序执行较少的事件处理。

  2. 复杂性：didTouch给你的代码增加了不必要的复杂性......作为一般的经验法则，如果你可以通过编写更少的代码来获得相同的结果，那么更短的解决方案是首选，除非使用更长的解决方案有有效的好处。

要记住的另一个潜在问题是互斥。JavaScript 是线程安全didTouch的，当您仍在处理第一个事件时，您真的不需要担心第二个事件触发和更改标志。但请记住，使用异步方法遇到互斥问题并非不可能。

推荐阅读