如何获取 onclick 调用对象？答案

【问题标题】：How to get the onclick calling object?如何获取 onclick 调用对象？
【发布时间】：2009-10-12 09:51:44
【问题描述】：

我需要在onclick 事件的调用对象上有一个处理程序。

<a href="123.com" onclick="click123(event);">link</a>

<script>
  function click123(event) {
    //i need <a> so i can manipulate it with Jquery
  }
</script>

我想不使用 jQuery 的 $().click 或 $().live 而是使用上述方法。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

在内联点击处理程序中传入this

<a href="123.com" onclick="click123(this);">link</a>

或者在函数中使用event.target（根据W3C DOM Level 2 Event model）

function click123(event)
{
    var a = event.target;
}

当然，IE is different，所以处理这个问题的原生 JavaScript 方式是

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

或者不那么冗长

function doSomething(e) {

    e = e || window.event;
    var targ = e.target || e.srcElement || e;
    if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}

其中e 是event object，它在IE 以外的浏览器中传递给函数。

如果您使用 jQuery，我强烈建议使用不显眼的 JavaScript 并使用 jQuery 将事件处理程序绑定到元素。

【讨论】：

if (!e) var e = window.event; 有点多余——e 已经声明了，为什么还要这样呢？ if 也可以完全避免，以支持更短的三元 - e = e || window.event。 e.target 同上——这 3 行很容易替换为——var target = e.target || e.srcElement ;)
@kangax - 我不会说e= e || window.event 是一个三元运算符，因为它不是三个参数而是两个，它是一个logical-or/default 运算符 - javascript.crockford.com/survey.html。但我明白这一点，它看起来确实更整洁，我通常使用它。我只是粘贴了链接文章中的代码，但现在将给出我的答案:)
@Russ Cam Sigh...下次我一定要在早上离开 cmets 前喝咖啡:)
@kangax - 没问题，你有一个简洁有效的观点:)
有人可以提供有关“Safari 错误”的详细信息，特别是适用于哪个版本以及最终在哪里/是否“修复”？

【解决方案2】：

最简单的方法是将 this 传递给 click123 函数或你也可以这样做（跨浏览器）：

function click123(e){
  e = e || window.event;
  var src = e.target || e.srcElement;
  //src element is the eventsource
}

【讨论】：

【解决方案3】：

我认为最好的方法是使用currentTarget 属性而不是target 属性。

Event 接口的 currentTarget 只读属性标识事件的当前目标，因为事件遍历 DOM。它始终指代事件处理程序已附加到的元素，与 Event.target 不同，Event.target 标识发生事件的元素。

例如：

<a href="#"><span class="icon"></span> blah blah</a>

Javascript：

a.addEventListener('click', e => {
    e.currentTarget; // always returns "a" element
    e.target; // may return "a" or "span"
})

【讨论】：

不是。 currentTarget 在 IE 和 Firefox 上不存在。对于这些浏览器，您需要回退到 srcElement。如果您的元素没有子元素，您可以始终安全地使用目标。使用 e.currentTarget || e.srcElement 仅适用于下面有子元素的 div 和东西。
不支持！，currentTarget 仅在 (developer.mozilla.org/en-US/docs/Web/API/Event/…
感谢您的提醒！可能是 React 在其中一个版本中存在问题，因为这是我重现问题的地方。
这个答案确定了一个接受答案的主要问题（您的目标可以是 onclick 父元素的任何子元素，不一定是父元素 iteslf）并且应该有更多的赞成票。
对我来说它在 chrome 上为空

【解决方案4】：

http://docs.jquery.com/Events/jQuery.Event

试试event.target

包含发出的 DOM 元素事件。这可以是元素为该事件注册的或它的孩子。

【讨论】：

【解决方案5】：

您的方法的问题是您的 HTML 与 javascript 杂乱无章。如果你把你的 javascript 放在一个外部文件中，你可以不显眼地访问你的 HTML，这样会更整洁。

您可以在后期使用 addEventListener/attackEvent(IE) 扩展您的代码以防止内存泄漏。

这是没有 jQuery 的

<a href="123.com" id="elementid">link</a>

window.onload = function () {
  var el = document.getElementById('elementid');
  el.onclick = function (e) {
    var ev = e || window.event;
    // here u can use this or el as the HTML node
  }
}

你说你想用 jQuery 来操作它。所以你可以使用 jQuery。比这样做更好：

// this is the window.onload startup of your JS as in my previous example. The difference is 
// that you can add multiple onload functions
$(function () {
  $('a#elementid').bind('click', function (e) {
    // "this" points to the <a> element
    // "e" points to the event object
  });
});

【讨论】：