如何绑定“touchstart”和“click”事件但不响应两者？

Question

我正在开发一个必须在各种设备上运行的移动 web 网站。 目前让我头疼的是BlackBerry。

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

理想情况下我只是使用：

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

但我们遇到的问题是，其中一些 blackberry 设备从触摸到触发点击之间存在非常烦人的延迟。

补救措施是改为使用 touchstart：

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

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

一个额外的问题：有没有办法做到这一点，并另外适应甚至没有 touchstart 事件的浏览器？ 在对此进行研究时，看起来 BlackBerry OS5 不支持 touchstart，因此还需要依赖该浏览器的点击事件。

附录：

也许一个更全面的问题是：

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

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

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

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

但是，这仍然存在一个问题：支持 BOTH 的设备如何。 我们支持的一些手机（即诺基亚和黑莓）既有触摸屏又有键盘。 所以这让我又回到了最初的问题……有没有办法以某种方式同时允许两者？

Answer 1

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

---

绑定到两者，但制作一个标志，以便 function 每 100 毫秒左右只触发一次。

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

  return false
});

Answer 2

这是我“创建”的修复程序，它删除了 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

});

Answer 3

你可以尝试这样的事情：

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

Answer 4

通常这也适用：

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

});

Answer 5

只需添加return false; 在on("click touchstart")事件结束时 function 可以解决这个问题。

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

来自 jQuery 关于.on()的文档

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

Answer 6

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

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

  //your code here
});

在我的例子中，点击事件被绑定到一个<a>元素，所以我不得不删除点击绑定并重新绑定一个点击事件，这阻止了<a>元素的默认操作。

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

  //your code here
});

Answer 7

我通过以下方式成功了。

十分简单...

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

Answer 8

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

$('#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")更兼容鼠标和触摸。

由此得出的结论是，恢复到仅使用点击事件将是向前推进的最简单的解决方案。

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

Answer 9

检查来自谷歌的快速按钮和主机点击https://developers.google.com/mobile/articles/fast_buttons

Answer 10

好吧...所有这些都非常复杂。

如果你有 modernizr，那就很容易了。

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

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

Answer 11

通常你不想混合默认触摸和非触摸（点击）api。一旦你进入触摸世界，只处理与触摸相关的功能会更容易。 下面是一些伪代码，可以执行您想要的操作。

如果您在 touchmove 事件中连接并跟踪位置，您可以在 doTouchLogic function 中添加更多项目来检测手势等等。

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
     }
}

Answer 12

另一个实现更好的维护。 然而，这个技术也会做 event.stopPropagation()。 单击不会被单击 100 毫秒的任何其他元素捕获。

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()) {
      ...
   }
}

Answer 13

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

我将 function on的 jQuery 替换为修改后的 jQuery，只要浏览器支持触摸事件，我的所有点击事件都将替换为 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

Answer 14

我只是想出了记住是否触发了ontouchstart的想法。 在这种情况下，我们在支持它的设备上并希望忽略onclick事件。 由于ontouchstart应该始终在onclick之前触发，我正在使用这个：

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

Answer 15

你可以这样尝试：

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

Answer 16

就我而言，这非常有效：

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

主要问题是当我尝试使用 mouseup 而不是点击时，在触摸设备上同时触发点击和触摸，如果我使用点击关闭，某些功能在移动设备上根本不起作用。 单击的问题是这是一个全局事件，它触发了包括 touchend 在内的事件的 rest。

Answer 17

对我来说，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;
});

Answer 18

这对我有用，移动设备会同时监听两者，因此请防止触摸事件。 桌面只听鼠标。

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

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

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

Answer 19

此处未提及，但您可能想查看此链接： 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 上进行测试，它只听到click

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

我了解到我没有考虑的第三种设备，即触摸屏笔记本电脑。 它是一种同时支持触摸和点击事件的混合设备。 绑定一个事件意味着只支持该事件。 这是否意味着拥有触摸屏和鼠标的人必须明确触摸，因为这是我正在处理的唯一事件？

绑定touchstart和click似乎是处理这些混合设备的理想选择。 为了防止事件触发两次，我将e.stopPropagation()和e.preventDefault()添加到回调函数中。 e.stopPropagation()阻止事件“冒泡”到他们的父母，但也阻止第二个事件触发。 我将e.preventDefault()作为“以防万一”包括在内，但似乎可以省略。

Answer 20

尝试解决此问题时需要考虑很多事情。 大多数解决方案要么中断滚动，要么不正确处理幻影点击事件。

如需完整解决方案，请参阅https://developers.google.com/mobile/articles/fast_buttons

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

Answer 21

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

Answer 22

利用点击将始终跟随触摸事件这一事实，这是我在无需使用超时或全局标志的情况下消除“幽灵点击”的方法。

$('#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事件在元素上触发时，一个标志集，然后在点击到来时被删除（并被忽略）。

Answer 23

为什么不使用 jQuery 事件 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
};

Answer 24

如果您使用的是 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));

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

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

Answer 25

对于简单的功能，只要识别触摸或点击我使用以下代码：

var element = $("#element");

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

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

Answer 26

我正在尝试这个，到目前为止它有效（但我只在 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”的处理程序，所以有一个简单的 function 让我无需太多代码即可处理问题，这就是我采用这种方式的原因。

Answer 27

编辑：我以前的答案（基于此线程中的答案）对我来说不是通往 go 的方式。 我想要一个子菜单在鼠标输入或触摸点击时展开，并在鼠标离开或其他触摸点击时折叠。 由于鼠标事件通常在触摸事件之后触发，因此编写同时支持触摸屏和鼠标输入的事件侦听器有点棘手。

jQuery 插件：触摸或鼠标

我最终编写了一个 jQuery 插件，称为“触摸或鼠标”（897 字节缩小），它可以检测事件是否由触摸屏或鼠标调用（无需测试触摸支持）。 这使得同时支持触摸屏和鼠标并完全分离它们的事件。

通过这种方式，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上调用。 body 元素跟踪touchstart和touchend事件，这样就不必在触发元素（即链接或按钮）上触发touchend事件。 在这两个触摸事件之间，此插件认为任何鼠标事件都是由触摸调用的。
2. 鼠标事件仅在touchend之后触发，当在 touchend 之后的ghostEventDelay （选项，默认为 1000ms）内touchend鼠标事件时，此插件认为鼠标事件是由触摸调用的。
3. 当使用触摸屏点击一个元素时，元素获得:active mouseleave事件只有在元素失去这个 state 后才会被触发。 点击另一个元素。 由于这可能是触发mouseenter事件后的几秒（或几分钟！），因此此插件会跟踪元素的最后一个mouseenter事件：如果最后一个mouseenter事件是由触摸调用的，则以下mouseleave事件也被认为是被调用的触碰。

Answer 28

尝试使用来自jQuery Mobile的Virtual Mouse (vmouse) Bindings 。 这是特别针对您的情况的虚拟事件：

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

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

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

Answer 29

这是一个简单的方法：

// 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 数据 object 中的 'trigger' 属性，并且仅在事件类型等于 'trigger' 中的值时执行。 在触摸设备上，事件链可能是“touchstart”，然后是“click”； 但是，不会执行“click”处理程序，因为“click”与保存在“trigger”（“touchstart”）中的初始事件类型不匹配。

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

这是一个你可以玩的代码笔（尝试点击触摸设备上的按钮 - 应该没有点击延迟）： 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);
  });
};

代码笔： http://codepen.io/thdoan/pen/GZrBdo/

Answer 30

我正在开发一个必须在各种设备上运行的移动 web 站点。 目前让我头疼的是BlackBerry。

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

理想情况下，我会使用：

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

但我们遇到的问题是，这些 blackberry 设备中的一些设备从触摸到触发点击之间存在非常烦人的延迟。

补救措施是改用 touchstart：

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

但是我如何 go 关于绑定两个事件，但只触发一个？ 我仍然需要键盘设备的点击事件，但当然，如果我使用的是触摸设备，我不希望触发点击事件。

一个额外的问题：有没有办法做到这一点，并额外适应甚至没有触摸启动事件的浏览器？ 在对此进行研究时，看起来 BlackBerry OS5 不支持 touchstart，因此还需要依赖该浏览器的点击事件。

附录：

也许更全面的问题是：

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

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

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

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

但是，这仍然存在一个问题：支持 BOTH 的设备怎么样。 我们支持的一些手机（即诺基亚和黑莓）既有触摸屏又有键盘。 所以那种让我回到原来的问题……有没有办法以某种方式同时允许两者？

Answer 31

我也在开发 Android/iPad web 应用程序，似乎只要使用“touchmove”就足以“移动组件”（不需要 touchstart）。 通过禁用touchstart，你可以使用.click(); 来自 jQuery。它实际上在工作，因为它没有被 touchstart 超载。

最后，你可以 binb.live("touchstart", function(e) { e.stopPropagation(); }); 要求 touchstart 事件停止传播，客厅到 click() 被触发。

它对我有用。