Question

我为jQuery编写了一系列插件，它们基本上充当了移动浏览器的事件。你可以在这里看到＆gt; http://ben-major.co.uk/2011/11/jquery-mobile-events/

目前，它们由$(ele).tap(handler)调用，依此类推，但我想添加一些功能来触发自定义事件，以便可以使用$(ele).on('tap', handler);之类的功能来利用这些功能。

我现在正在使用以下代码，但这似乎不起作用：

$(function() {
    $('*').tapstart(function() { $(this).trigger('tapstart'); })
          .tapend(function() { $(this).trigger('tapend'); })
          .tap(function() { $(this).trigger('tap'); })
          .doubletap(function() { $(this).trigger('doubletap'); })
          .taphold(function() { $(this).trigger('taphold'); })
          .swipedown(function() { $(this).trigger('swipedown'); })
          .swipeup(function() { $(this).trigger('swipeup'); })
          .swipeleft(function() { $(this).trigger('swipeleft'); })
          .swiperight(function() { $(this).trigger('swiperight'); });
});

这是一个jsFiddle来证明我的问题。显然点击第二个div应该模仿第一个{{1}}的动作，但是因为在解析了上面给出的绑定后它被添加到DOM中，所以它没有。

我想我的问题是：实现我想要的最好的方法是什么？有没有办法选择现在和将来存在于DOM中的所有元素（如果可能的话，我宁愿不使用livequery或外部插件）。

Answer 1

在您的情况下，我认为jQuery不会正确处理您的自定义事件（因为自定义事件不会冒泡到文档中）。答案是将事件侦听器的一个分支绑定到document。并且不要在这种情况下使用jQuery。

jQuery的实时模式几乎与我建议的相同，但它会尝试将event.target与绑定选择器（在你的问题中说'*'）相匹配，这非常慢（也是手机的电池滤水器）。）

如果你想与元素的某个类型或某个className进行交互，只需自己处理它，并激活所需的事件处理程序。

一个例子：

function findAncestorOfType(el, type) {
  while (el && !(el instanceof type))
    el = el.parent;
  return el;
}

document.addEventListener('click', function(evt) {
  var target = findAncestorOfType(evt.target, LIElement);
  if (target) {
    // distinguish event type
    type = 'click';
    callbacks[type](target, evt);
  }
}, false);

在jQuery中触发自定义事件以与live（）一起使用

1 个答案: