我在那里给出了一个答案，我用jsfiddle演示。 您可以检查不同的设备并报告。

基本上，我使用了一种事件锁和一些服务于它的函数:

/*
 * Event lock functions
 * ====================
 */
function getEventLock(evt, key){
   if(typeof(eventLock[key]) == 'undefined'){
      eventLock[key] = {};
      eventLock[key].primary = evt.type;
      return true;
   }
   if(evt.type == eventLock[key].primary)
      return true;
   else
      return false;
}

function primaryEventLock(evt, key){
   eventLock[key].primary = evt.type;
}

然后，在我的事件处理程序中，我从对我的锁的请求开始:

/*
 * Event handlers
 * ==============
 */
$("#add").on("touchstart mousedown", addStart);
$("#add").on("touchend mouseup", addEnd);
function addStart(evt){
   // race condition between 'mousedown' and 'touchstart'
   if(!getEventLock(evt, 'add'))
      return;

   // some logic
   now = new Date().getTime();
   press = -defaults.pressDelay;
   task();

   // enable event lock and(?) event repetition
   pids.add = setTimeout(closure, defaults.pressDelay);

   function closure(){
        // some logic(?): comment out to disable repetition
      task();

      // set primary input device
      primaryEventLock(evt, 'add');

      // enable event repetition
      pids.add = setTimeout(closure, defaults.pressDelay);
   }
}
function addEnd(evt){
      clearTimeout(pids.add);
}

我必须强调的是，问题不在于简单地对一个事件做出回应，而在于对两个事件都不做出回应。

最后，在jsfiddle中有一个更新版本的链接，我通过在事件开始和结束处理程序中添加一个对事件锁库的简单调用以及2个范围变量eventLock和eventLockDelay，将对现有代码的影响最小化。

一般来说，你不希望混合默认的触摸和非触摸(点击)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
     }
}

我相信现在最好的做法是:

$('#object').on('touchend mouseup', function () { });

触端

触摸点从触摸表面移除时触发touchend事件。

touchend事件不会触发任何鼠标事件。

mouseup

当鼠标指针在元素上时，mouseup事件被发送给元素，并且鼠标按钮被释放。任何HTML元素都可以接收这个事件。

mouseup事件不会触发任何触摸事件。

例子

$（'#click'）.on（'mouseup'， function （） { alert（'Event detection'）; }）; $（'#touch'）.on（'touchend'， function （） { alert（'Event detection '）; }）; <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <h1 id=“点击”>点击我</h1> <h1 id=“触摸”>触摸我</h1>

编辑(2017)

截至2017年，以Chrome为首的浏览器正在采取措施，通过消除点击请求上的点击事件产生的延迟，使点击事件.on(“点击”)对鼠标和触摸更加兼容。

由此得出的结论是，回到只使用单击事件将是最简单的解决方案。

我还没有做任何跨浏览器测试，看看这是否可行。

我发现的最好方法是编写touch事件，并让该事件以编程方式调用正常的click事件。这样你就有了所有正常的点击事件，然后你只需要为所有的触摸事件添加一个事件处理程序。对于每一个你想要使其可触摸的节点，只需向其添加“touchable”类来调用触摸处理程序。用Jquery，它的工作原理是这样的，有一些逻辑，以确保它是一个真正的触摸事件，而不是一个假阳性。

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});

UDPATE:

我一直致力于为同一个函数同时使用点击和触摸事件的实现，如果类型发生变化，该函数会有效地阻止事件。我的目标是有一个反应更灵敏的应用程序界面——我想减少从事件开始到UI反馈循环的时间。

为了让这个实现工作，假设你已经在'click'和'touchend'上添加了所有相关事件。这可以防止在需要运行两个不同类型的事件时剥夺一个元素的事件冒泡。

下面是一个基于API的轻量级实现，出于演示目的，我对其进行了简化。它演示了如何在折叠元素上使用该功能。

var tv = {
    /**
     * @method eventValidator()
     * @desc responsible for validating event of the same type.
     * @param {Object} e - event object
     * @param {Object} element - element event cache
     * @param {Function} callback - callback to invoke for events of the same type origin
     * @param {Object} [context] - context to pass to callback function
     * @param {Array} [args] - arguments array to pass in with context. Requires context to be passed
     * @return {Object} - new event cache
     */
    eventValidator: function(e, element, callback, context, args){
        if(element && element.type && element.type !== e.type){
            e.stopPropagation();
            e.preventDefault();
            return tv.createEventCacheObj({}, true);
        } else {
            element = tv.createEventCacheObj(e);
            (typeof context === "object" ? callback.apply(context, args) : callback());
            return element;
        }
    },

    /**
     * @method createEventCacheObj()
     * @param {Object} event - event object
     * @param {String} [event.type] - event type
     * @param {Number} [event.timeStamp] - time of event in MS since load
     * @param {Boolean} [reset=false] - flag to reset the object
     * @returns {{type: *, time: string}}
     */
    createEventCacheObj: function (event, reset){
        if(typeof reset !== 'boolean') reset = false;
        return {
            type: !reset ? event.type : null,
            time: !reset ? (event.timeStamp).toFixed(2): null
        };
    }
};

// Here is where the magic happens
var eventCache = [];
var pos = 0;

var $collapses = document.getElementsByClassName('tv-collapse__heading');
    Array.prototype.forEach.call($collapses, function(ele){
        ele.addEventListener('click', toggleCollapse);
        ele.addEventListener('touchend', toggleCollapse);

        // Cache mechanism
        ele.setAttribute('data-event-cache', String(pos++));
    });

/**
 * @func toggleCollapse()
 * @param {Object} e - event object
 * @desc responsible for toggling the state of a collapse element
 */
function toggleCollapse(e){
    eventCache[pos] = tv.eventValidator(e, eventCache[pos], function(){
       // Any event which isn't blocked will run the callback and its content
       // the context and arguments of the anonymous function match the event function context and arguments (assuming they are passed using the last two parameters of tv.eventValidator)

    }, this, arguments);
}

最初的回答:

这里有一个回应，这是拉斐尔Fragoso的答案的修改-纯JS。

(函数(){ button = document.getElementById('sayHi'); 按钮。addEventListener (touchstart, ohHai); 按钮。addEventListener(“点击”,ohHai); 函数ohHai(事件){ event.stopPropagation (); event.preventDefault (); console.log('ohHai is:'， event.type); }; }) (); <！DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > <title>SO - Answer</title> > < /头 <身体> <button id="sayHi">有人吗?< / >按钮 < /身体> < / html >

运行下面的代码片段，并注意输出:

电话 平板电脑 平板电脑(桌面模式-如适用) 桌面 桌面(触摸屏-如适用)

关键是我们要阻止连续事件的爆发。移动浏览器尽最大努力在触摸发生时模拟点击。我希望我能找到一篇文章的链接，这篇文章解释了触摸启动后通过点击发生的所有事件。(我正在搜索双击和点击实际发射之间的300ms延迟)。

触摸和鼠标设备

I ran a couple of tests using a Surface Pro and a windows 10 desktop with a touchscreen. What I found was that they both triggered events as you would suspect, touchstart for touches and click for trackpad, mouse, and stylist. The interesting thing was that a touch event which was near, but not on the button, would triggering a click event without a touch event. It seems that the built in functionality in Windows 10 looks for the closest nodes within a radius and if a node is found it will fire a mouse based event.

同一类型的多个事件

如果一个元素上有两个相同类型的事件，停止该事件冒泡可以防止其中一个事件触发。有几种不同的方法可以使用某种缓存来处理这个问题。我最初的想法是修改事件对象，但我们得到了一个引用，所以我认为缓存解决方案将必须足够。

你可以尝试这样做:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);