jquery .on本身

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

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

简而言之：
– 事件必须能够冒泡
– 触发器和侦听器是相同的元素
– 如果自定义事件由祖先触发，则必须忽略自定义事件

这是如何实现的？

用例按要求

我使用jquery UI对话框小部件

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

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

但是，您要求正常事件可能不支持的其他function。 您应该考虑设置一个jQuery特殊事件 。 查看Ben Alman撰写的这篇精彩文章 。

说到先决条件：

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

请参阅jsFiddle上的测试用例 。