0

假设我有一些看起来像这样的 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”或其他东西并且它会返回该项目，那就太好了。

4

2 回答 2

3

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

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

正如文档所解释的：

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

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

于 2013-07-05T19:37:46.093 回答
1

事件.currentTarget

用于event.currentTarget指代处理事件的元素（在这种情况下.foo），即使this可能不是。

根据 jQuery 文档：

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

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

也值得注意

您还可以使用event.delegateTarget来引用事件被委托给的元素（在这种情况下document，因为您使用的是$(document).on()）。

工作示例

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

于 2013-07-05T19:44:00.130 回答