Javascript preventDefault vs if check跳过处理鼠标和触摸？

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

至少有一种方法可以解决这个问题

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

如果我们改为这样做（第二种方式）：

---

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

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

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

复杂性：

didTouch

正在给代码增加不必要的复杂性。。。根据一般经验，如果您可以通过编写更少的代码来实现相同的结果，则最好使用较短的解决方案，除非使用较长的解决方案有明显的好处

---

另一个需要牢记的潜在问题是相互排斥。当您仍在处理第一个事件时，您实际上不需要担心第二个事件触发和更改

didTouch

标志。但请记住，使用异步方法时遇到互斥问题并非不可能。

我曾经遇到过此问题，但对于其他事件，请检查我的解决方案：

let handler = function (e) {
  // do stuff
};

if (isTouchDevice()) {
  key.addEventListener('touchstart', handler);
} else {
  key.addEventListener('mousedown', handler);
}

function isTouchDevice() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function (query) {
    return window.matchMedia(query).matches;
  };
  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}

---

我想这基本上回答了我的问题。大部分时间安全吗？如果我对任何didTouch变量保持良好的有限范围，您认为互斥问题可以很好地避免吗？我的建议是不要使用第二种方法。。由于性能、复杂性和潜在的互斥问题。。。我不是这方面的专家，但是我所看到的关于这个问题的所有文档，请使用您的第一种方法。。。不确定，为什么要使用第二种方法？好处是什么？我对将定点事件与自动滚动相结合很感兴趣。就像在滚动框中使用的拖动一样，在滚动框中使用鼠标左键是不舒服的，或者这种行为只是预期的，但触摸不到。至少可以说，这是一个非常特殊的问题。为了正确地执行此操作，需要为每个像素移动记录定点设备的位置。使用触摸和鼠标的主要原因是为了与选择默认设置的其他库兼容，默认设置会以任何方式停止鼠标，并且存在其他问题，如直径精度。这对其中一个或另一个都有效，但当两者都可用时则不起作用。例如，当鼠标和触摸显示器交替使用时。

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);

let handler = function (e) {
  // do stuff
};

if (isTouchDevice()) {
  key.addEventListener('touchstart', handler);
} else {
  key.addEventListener('mousedown', handler);
}

function isTouchDevice() {
  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  var mq = function (query) {
    return window.matchMedia(query).matches;
  };
  if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
  return mq(query);
}