我正在一个必须在各种设备上工作的移动网站上。目前让我头疼的是黑莓。

我们需要同时支持键盘单击和触摸事件。

理想情况下，我只会使用：

$thing.click(function(){...})

但我们遇到的问题是，这些黑莓设备中的某些设备从触摸到触发点击之间都存在非常令人讨厌的延迟。

补救措施是改为使用touchstart：

$thing.bind('touchstart', function(event){...})

但是我该如何绑定两个事件，而只触发一个？我仍然需要键盘设备的click事件，但是，当然，如果我使用的是触摸设备，则不要触发click事件。

一个额外的问题：是否仍然可以这样做，并且还可以容纳甚至没有touchstart事件的浏览器？在进行研究时，BlackBerry OS5似乎不支持touchstart，因此还需要依赖于该浏览器的单击事件。

附录：

也许更全面的问题是：

使用jQuery，是否可以/建议使用相同的绑定来处理触摸交互和鼠标交互？

理想情况下，答案是肯定的。如果没有，我确实有一些选择：

1）我们使用WURFL获取设备信息，因此可以创建我们自己的设备矩阵。根据设备，我们将使用touchstart或click。

2）通过JS检测浏览器中的触摸支持（我需要对此进行更多研究，但这似乎是可行的）。

但是，这仍然存在一个问题：同时支持两者的设备又如何呢？我们支持的某些手机（即诺基亚和BlackBerries）同时具有触摸屏和键盘。因此，这使我全神贯注于最初的问题...是否有办法以某种方式同时允许这两者？

更新：检查jQuery 指针事件Polyfill项目，该项目使您可以绑定到“指针”事件，而无需在鼠标和触摸之间进行选择。

绑定到两者，但创建一个标志，以便该函数每100ms左右仅触发一次。

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

  return false
});

这是我“创建”的修复程序，它删除了GhostClick并实现了FastClick。自行尝试，让我们知道它是否对您有用。

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

您可以尝试这样的事情：

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

通常这也可以：

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

只需return false;在on("click touchstart")事件函数的末尾添加即可解决此问题。

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

来自.on（）上的jQuery文档

false从事件处理程序返回将自动调用event.stopPropagation()和event.preventDefault()。false也可以为处理程序传递一个值，作为的简写形式function(){ return false; }。

我不得不做类似的事情。这是对我有用的简化版本。如果检测到触摸事件，请删除单击绑定。

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

在我的情况下，click事件绑定到一个<a>元素，因此我必须删除click绑定并重新绑定一个click事件，这阻止了该<a>元素的默认操作。

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

我通过以下方式成功。

十分简单...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

我相信最佳做法是现在使用：

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

触摸端

当从触摸表面上移除触摸点时，将触发touchend事件。

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

---

鼠标向上

当鼠标指针悬停在元素上，并且释放鼠标按钮时，mouseup事件将发送到该元素。任何HTML元素都可以接收此事件。

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

例

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

编辑（2017）

截至2017年，浏览器从Chrome开始，并逐步实现点击事件 .on("click")通过消除点击请求上的点击事件产生的延迟与鼠标和触摸更加兼容。

由此得出的结论是，退回到仅使用click事件将是前进的最简单的解决方案。

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

通常，您不想混合使用默认的触摸和非触摸（单击）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
     }
}

检查来自Google https://developers.google.com/mobile/articles/fast_buttons的快速按钮和快捷键

好吧...所有这些都超级复杂。

如果您拥有现代化的产品，那就很容易了。

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

另一个实现更好维护的实现。但是，此技术也会做event.stopPropagation（）。单击不会被单击持续100ms的任何其他元素捕获。

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

仅出于文档目的，这是我想到的最快/响应最快的台式机/移动解决方案点击操作：

我替换了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);
        };
    }()),
});

用法将与以前完全相同，例如：

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

但是它会在可用时使用touchstart，在不可用时单击。无需任何延迟：D

我只是想出一个想法来记住是否ontouchstart曾经被触发过。在这种情况下，我们在支持它的设备上并且想要忽略该onclick事件。由于ontouchstart应该始终在之前 触发onclick，因此我在使用：

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

您可以这样尝试：

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

就我而言，这很完美：

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

主要问题是，当我尝试在触摸设备上同时单击clickup的mouseup触发了click和touchend时，如果我使用click off，则某些功能根本无法在移动设备上使用。点击的问题在于，这是一个全局事件，会触发事件的其余部分，包括touchend。

这对我来说很有效，移动设备既可以听又可以听，所以请避免同时听，这是触摸事件。桌面只听鼠标。

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

对我来说，Mottie给出的最佳答案是我正在尝试使他的代码更可重用，所以这是我的贡献：

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

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

我还在Android / iPad Web应用程序上工作，似乎只要使用“ touchmove”就足以“移动组件”（无需touchstart）。通过禁用touchstart，可以使用.click（）;。来自jQuery。它之所以有效，是因为touchstart并没有使它过载。

最后，您可以将.live（“ touchstart”，function（e）{e.stopPropagation（）;}）装箱。要求touchstart事件停止传播，客厅单击click（）触发。

它为我工作。

解决此问题时，需要考虑许多事项。大多数解决方案要么中断滚动，要么无法正确处理幻像单击事件。

有关完整的解决方案，请参见https://developers.google.com/mobile/articles/fast_buttons

注意：您不能按每个元素处理幻影点击事件。屏幕位置会触发延迟的单击，因此，如果您的触摸事件以某种方式修改了页面，则该单击事件将发送到该页面的新版本。

分配给事件'touchstart mousedown'或'touchend mouseup'避免使用的不良副作用可能是有效的click。

利用单击将始终跟随触摸事件这一事实，这是我要做的，摆脱了“重击”，而不必使用超时或全局标志。

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

基本上，每当ontouchstart元素上触发事件时，都会在单击时标记一个集合，然后将其删除（并忽略）。

为什么不使用jQuery Event API？

http://learn.jquery.com/events/event-extensions/

我成功地使用了这个简单的事件。它干净，可命名空间且足够灵活以进行改进。

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

如果您使用的是jQuery，以下内容对我来说效果很好：

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

其他解决方案也不错，但是我将多个事件绑定在一个循环中，并且需要自调用函数来创建适当的闭包。另外，我不想禁用绑定，因为我希望它在下次单击/触摸启动时可以被调用。

可能会帮助处于类似情况的人！

对于简单功能，只需识别触摸或单击“我使用以下代码”：

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

如果定义了touchstart事件，它将返回“ touch”，否则将返回“ no touch”。就像我说的那样，这是单击/点击事件的一种简单方法。

我正在尝试此操作，到目前为止它仍然有效（但我仅在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...
  }

我不喜欢每次触摸都重新绑定处理程序这一事实，但是所有被认为是触摸的事情并不经常发生（在计算机时间内！）。

我有大量的处理程序，例如用于“ #keypad”的处理程序，因此拥有一个简单的函数即可让我在无需太多代码的情况下处理问题，这就是为什么我采用这种方式。

尝试使用Virtual Mouse (vmouse) Bindings从jQuery Mobile。这是虚拟事件，尤其是针对您的情况：

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

浏览器支持列表：http : //jquerymobile.com/browser-support/1.4/

编辑：我以前的答案（基于该线程中的答案）不是我的方法。我希望有一个子菜单在鼠标输入或触摸单击时展开，而在鼠标离开或另一触摸单击时折叠。由于通常在触摸事件之后触发鼠标事件，因此编写同时支持触摸屏和鼠标输入的事件侦听器有点棘手。

jQuery插件：触摸或鼠标

我最后写了一个名为“ Touch Or Mouse ”（最小897字节）的jQuery插件，它可以检测事件是由触摸屏还是鼠标调用的（无需测试触摸支持！）。这使得触摸屏和鼠标的支持，同时事件完全分开。

这样，OP可以使用touchstart或touchend快速响应触摸点击以及仅由鼠标click调用的点击。

示范

第一个必须做出即。body元素跟踪触摸事件：

$(document.body).touchOrMouse('init');

鼠标事件以默认方式绑定到元素，通过调用，$body.touchOrMouse('get', e)我们可以找出事件是由触摸屏还是鼠标调用的。

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

在http://jsfiddle.net/lmeurs/uo4069nh上查看工作中的插件。

说明

1. 该插件需要在ie上调用。主体元素来跟踪touchstart和touchend事件，因此touchend不必在触发元素（即链接或按钮）上触发事件。在这两个touch事件之间，此插件认为任何要通过touch调用的鼠标事件。
2. 只有在之后touchend的鼠标事件ghostEventDelay（默认情况下为1000ms）内触发鼠标事件时，才会触发鼠标事件touchend，此插件认为鼠标事件是通过touch调用的。
3. 使用触摸屏单击某个元素时，该元素会获得:active状态。mouseleave仅在元素通过ie失去此状态后才触发该事件。单击另一个元素。由于mouseenter事件触发后可能需要几秒钟（或几分钟！），因此此插件会跟踪元素的上一个mouseenter事件：如果上一个mouseenter事件是通过touch调用的，则以下mouseleave事件也被认为是touch调用的。

这是一种简单的方法：

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

基本上，您将触发的第一个事件类型保存到附加到根文档的jQuery数据对象中的'trigger'属性中，并且仅在事件类型等于'trigger'中的值时执行。在触摸设备上，事件链可能是“ touchstart”，然后是“ click”。但是，“ click”处理程序将不会执行，因为“ click”与“ trigger”（“ touchstart”）中保存的初始事件类型不匹配。

我相信这是一个安全的假设，那就是您的智能手机不会自发地从触摸设备更改为鼠标设备，否则水龙头将永远不会注册，因为“触发”事件类型每次仅保存一次页面加载和“点击”将永远不会与“ touchstart”匹配。

这是一个可以使用的Codepen（尝试在触摸设备上点击按钮-应该没有单击延迟）：http : //codepen.io/thdoan/pen/xVVrOZ

我还将其实现为一个简单的jQuery插件，该插件还通过传递选择器字符串来支持jQuery的后代过滤：

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen：http：//codepen.io/thdoan/pen/GZrBdo/

我发现最好的方法是编写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
});