jquery .on本身

Question

我想要一个元素来侦听实际由其自身触发的自定义事件。自定义事件可能是从后代触发的，但应该被忽略。它起源于自身很重要。它也需要成为一个事件，因为我可能需要额外的祖先来监听事件。

.on（http://api.jquery.com/on/）方法能够提供此功能。 selector参数可以用作过滤器。但是，不可以过滤掉侦听器元素本身。

简而言之：
- 活动必须能够泡泡 - 触发器和监听器是相同的元素
- 如果自定义事件由祖先触发

，则侦听器必须忽略该事件

这是如何实现的？

按要求使用案例

我使用jquery UI对话框小部件

$el = $('#dialogDiv');
$el.on('customEvent', $el /* Won't work */, function() {
    //Do whatever
});
$el.dialog({
    open: function() {
        $el.trigger('customEvent');
    }
});

Answer 1

删除不起作用的部件，将使其正常工作。

$el = $('#dialogDiv');
$el.on('customEvent', function(e) {
    //Do whatever
});
$el.dialog({
    open: function() {
        $el.trigger('customEvent');
    }
});

但是，您要求的是普通事件可能不支持的其他功能。您应该考虑设置jQuery special event。检查this awesome article by Ben Alman。

说到先决条件：

• 除非event.stopPropagation()或event.stopImmediatePropagation()
阻碍其传播，否则事件始终会冒泡
• 触发器和侦听器已经在同一个元素上
• 除非您传递一些可以识别触发它的元素的参数并检查它是否是祖先
，否则侦听器将不知道是什么触发了它。

请参阅test case on jsFiddle。

Answer 2

您可以传递给.on()的选择器用于委托目标，以匹配可以处理click事件的元素（它应该是一个字符串，而不是一个对象）。

但是在你的情况下，由于你的选择器和委托目标是相同的，所以没有必要，所以这应该按预期工作：

$el.on('customEvent', function(evt) {
    //Do whatever
});

要检测事件是否来自后代，您可以将evt.target与元素本身进行比较。

Answer 3

.on工作正常;忽略祖先检查e.target：

$el.on('customEvent', function(e) {
  if(e.target === this) {
    //Do whatever
  }
});