在事件冒泡中找到点击的来源答案

【问题标题】：Finding the source of a click in event bubbling在事件冒泡中找到点击的来源
【发布时间】：2013-04-24 14:00:46
【问题描述】：

我有以下代码：

<div id="buttons">
    <button id="btn1">1</button>
    <button id="btn2">2</button>
</div>

我将一个事件处理程序附加到<div> 以处理点击。

当我单击一个按钮时，该事件被 div 捕获。有没有办法获取事件的来源？

例如，如果事件发生在每个按钮上，那么this 关键字将引用这些按钮。当它在<div> 上时，它指的是那个。

当点击被div捕获时，有没有办法定位到点击的来源？即点击了哪个实际按钮？

谢谢大家

戴夫

【问题讨论】：

【解决方案1】：

您可以使用event 对象的originalTarget 属性来找出事件的来源。

HTML

<div id="buttons">
    <button id="btn1">1</button>
    <button id="btn2">2</button>
</div>

JavaScript

document.getElementById('buttons').onclick = function (evt) {
    var source = evt.srcElement || evt.originalTarget
    alert(source.id);
}

【讨论】：

【解决方案2】：

如果你使用 jQuery，这应该会有所帮助：

$("#buttons").click(function(evt){
       alert($(evt.target).attr("id"));
});

【讨论】：