这里没有提到，但你可能想看看这个链接:https://joshtronic.com/2015/04/19/handling-click-and-touch-events-on-the-same-element/

为了便于后人回顾，您可以简单地检查设备是否是触摸屏并仅分配给相关事件，而不是尝试分配给两个处理程序然后对结果进行排序。观察:

var clickEvent = (function() {
  if ('ontouchstart' in document.documentElement === true)
    return 'touchstart';
  else
    return 'click';
})();

// and assign thusly:

el.addEventListener( clickEvent, function( e ){ 
    // things and stuff
});

我使用它来绑定我的事件，这样我就可以在触摸屏上测试，处理touchstart和click事件，会触发两次，在我的开发PC上只听到点击

不过，该链接的作者提到了一个问题，即设计用于处理这两种事件的触摸屏笔记本电脑:

I learned about a third device I was not considering, the touchscreen laptop. It’s a hybrid device that supports both touch and click events. Binding one event means only that event be supported. Does that mean someone with a touchscreen and mouse would have to explicitly touch because that’s the only event I am handling? Binding touchstart and click seemed ideal to handle these hybrid devices. To keep the event from firing twice, I added e.stopPropagation() and e.preventDefault() to the callback functions. e.stopPropagation() stops events from “bubbling up” to their parents but also keeps a second event from firing. I included e.preventDefault() as a “just in case” but seems like it could be omitted.

为事件赋值'touchstart mousedown'或'touchend mouseup'可能会很有效，以避免使用click所产生的不必要的副作用。

我正在尝试这个，到目前为止，它是有效的(但我只在Android/Phonegap上，所以买者自负)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

我不喜欢的事实是，我重新绑定处理器上的每一个触摸，但所有的事情都认为触摸不会经常发生(在计算机时间!)

我有一个像“#键盘”这样的处理程序，所以有一个简单的函数，让我不用太多的代码就能处理问题，这就是我为什么这样做的原因。

更新:查看jQuery指针事件Polyfill项目，它允许您绑定到“指针”事件，而不是在鼠标和触摸之间选择。

绑定到两者，但要做一个标记，以便函数每100ms左右只触发一次。

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

一般来说，你不希望混合默认的触摸和非触摸(点击)api。一旦你进入触控世界，你就更容易处理与触控相关的功能。下面是一些伪代码，它们可以做您想做的事情。

如果你在touchmove事件中连接并跟踪位置，你可以在doTouchLogic函数中添加更多的项目来检测手势和其他东西。

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

出于文档的目的，以下是我所能想到的最快/响应最快的桌面点击/移动点击解决方案:

我用一个修改过的函数替换了jQuery的on函数，只要浏览器支持触摸事件，就用touchstart替换了我所有的点击事件。

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

than的用法和以前完全一样，比如:

$('#my-button').on('click', function(){ /* ... */ });

但它会在可用时使用touchstart，在不可用时使用click。不需要任何形式的延误:D