使用jQuery off（）删除元素上的触摸事件处理程序

Question

我正在使用基于jQuery的JavaScript库，该库允许移动触摸设备的触摸手势，toe.js。

toe.js允许我添加一个tap事件，类似于点击事件，因此我为所有当前＆amp;事件启用tap未来的.button元素：

$(document)
  .on('tap', '.button', function() {
    tapAction($(this));
  });

function tapAction($btn) {
  // do stuff
  // disable all event handlers
  $btn.off();
}

但是，我无法弄清楚如何删除此事件处理程序; off()无效...当我使用Chrome的开发工具检查时，所有触摸事件处理程序仍然存在于该元素上。

我可以执行$(document).off()，但这也可以删除所有元素的事件，包括当前和＆amp;未来，这不是我想要的:(

我查看了toe.js的源代码，但我找不到取消绑定事件的方法。那么如何删除所有元素的事件监听器，最好是使用jQuery？

Answer 1

嗯，你可以随时甩掉每一个触摸事件

$(document).on('tap', '.button', function() {
    $(this).off('touchstart', this);
    $(this).off('touchend', this);
    .....
});

Answer 2

使用unbind()

  

描述：从元素中删除以前附加的事件处理程序。

http://api.jquery.com/unbind/

Answer 3

问题在于我如何定义.on()事件处理程序。将.on()用于动态元素时，将选择器作为参数传递给.on()，您不能.off()项目的子集。原因是在根元素上只安装了一个事件处理程序，在本例中为document。因此，jQuery只能为所选的每个元素删除整个事件处理程序。

解决这个问题的方法是删除整个处理程序并附加一个新的处理程序，并排除动态元素的子集。所以......

// remove the entire 'tap' handler for all '.button' elements
$(document).off('tap', '.button');

// re-add the 'tap' handler for all '.button-subset' elements
// same elements as before but excluding a certain set
$(document).on('tap', '.button-subset', function() {
  tapAction($(this));
});

我不太喜欢这种解决方案，因为它效率低，不够优雅。我所做的是在按钮上添加一个disabled类，并在事件处理程序中检查它......

$(document)
  .on('tap', '.button', function() {
    if ($(this).hasClass('disabled')) { return false; }
    tapAction($(this));
  });