在 jQuery.on() 中查找匹配的选择器元素答案

【问题标题】：Finding matching selector element within jQuery.on()在 jQuery.on() 中查找匹配的选择器元素
【发布时间】：2013-07-06 04:19:47
【问题描述】：

假设我有一些看起来像这样的 HTML 标记：

<a href='#!' class='foo'><i class='bar'></i> Link</a>

然后，比如说，我将一个 jQuery 事件处理程序绑定到我的文档，如下所示：

$(document).on('click','.foo','click',function(e) {
  var obj = e.target;
  console.log(obj);
});

如果我单击锚点（“链接”）中的文本，“obj”最终会被设置为“a.foo”元素。但是，当我单击链接中的图标时，“obj”最终被设置为“i.bar”元素。

我添加了代码来查找合适的元素，如下所示：

$(document).on('click','.foo','click',function(e) {
  var obj = e.target;
  if (!$(obj).hasClass('foo')) {
    obj = $(obj).parents('.foo').first();
  }
  console.log(obj);
});

我只是想知道是否没有更优雅的解决方案。例如，如果你可以调用“e.selectorTarget”或其他东西，它会返回该项目。

【问题讨论】：

标签： jquery html events css-selectors

【解决方案1】：

您的.on() 调用使用指定了'.foo' 选择器的委托事件语法，因此jQuery 会将this 设置为.foo 元素。

$(document).on('click','.foo','click',function(e) {
    console.log(this);
});

正如the documentation所解释的：

当 jQuery 调用处理程序时，this 关键字是对正在传递事件的元素的引用；对于直接绑定事件，这是附加事件的元素，对于委托事件，这是匹配 [指定] selector 的元素。（请注意，如果事件从后代元素冒泡，则这可能不等于 event.target。）

请注意，在.on() 的第三个（数据）参数中指定'click' 有点多余。如果您要为不止一种类型的事件调用相同的函数，您可以使用 event.type property 获取类型。

【讨论】：

哈哈...哇！我想我忘了尝试最明显的解决方案。我很尴尬地说，我实际上已经为此感到沮丧一段时间了。我怎么从来没有尝试过“这个”？

【解决方案2】：

event.currentTarget

使用event.currentTarget 来指代处理事件的元素（在本例中为.foo），即使this 可能不会。

根据 jQuery 文档：

如果您使用 jQuery.proxy 或其他形式的范围操作， this 将等于您提供的任何上下文，而不是 event.currentTarget

这意味着如果使用代理，this 将引用作为代理提供的对象，因此event.currentTarget 是获取处理事件的元素的保证方式。

也值得注意

您还可以使用event.delegateTarget 来指代事件被委托给的元素（在本例中为document，因为您使用的是$(document).on()）。

工作示例

这是一个显示目标与此之间差异的小提琴：http://jsfiddle.net/2s2CE/

【讨论】：