2

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

.on ( http://api.jquery.com/on/ ) 方法能够提供此功能。选择器参数可以用作过滤器。但是，这不能过滤出侦听器元素本身。

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

这是如何实现的？

根据要求使用案例

我使用 jquery UI 对话框小部件

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

3 回答 3

1

删除不工作的部分，将使其工作。

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

但是，您要求的是普通事件可能不支持的其他功能。您应该考虑设置一个jQuery 特殊事件。查看Ben Alman 的这篇很棒的文章。

当涉及到您的先决条件时：

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

请参阅jsFiddle 上的测试用例。

于 2012-12-16T14:09:24.287 回答
1

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

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

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

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

于 2012-12-16T14:10:24.380 回答
1

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

$el.on('customEvent', function(e) {
  if(e.target === this) {
    //Do whatever
  }
});
于 2012-12-16T14:14:13.093 回答