Question

让我们说我有一些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);
});

如果我点击锚点中的文字（＆＃34; Link＆＃34;），＆＃34; obj＆＃34;最终被设置为＆＃34; a.foo＆＃34;元件。但是，当我点击链接中的图标时，＆＃34; obj＆＃34;最终被设置为＆＃34; i.bar＆＃34;元件。

我添加了代码来找到这样的相应元素：

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

我只是想知道是否有一个更优雅的解决方案。例如，如果你能打电话给＆＃34; e.selectorTarget＆＃34;那就太好了。什么的，它会返回那个项目。

Answer 1

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

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

正如the documentation所述：

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

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

Answer 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/

在jQuery.on（）中查找匹配的选择器元素

2 个答案:

event.currentTarget

也是注意事项

工作示例