javascript - 识别哪个 span 标签触发了 div 中的 javascript 函数

Question

我有一个 div html 元素，它内联设置了一个点击事件(不是我想要的方式，而是遗留代码)。看这里

<div class="myDiv" onclick="triggerJavascript();" id="myDiv">

<span id="text1">Text 1<span>
<span id="text2">Text 2<span>
<span id="text3">Text 3<span>
<span id="text4">Text 4<span>
<span id="text5">Text 5<span>

我想做的是识别点击事件来自哪个span标签test5，然后不执行triggerJavascript函数中的逻辑，否则完成triggerJavascript中的逻辑。

我该如何设置？我正在使用 jquery。

Answer 1

您可以使用 event.target为了访问元素。但是，为了获得此元素，您必须稍微更改 onclick 属性:

<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">

然后你可以在triggerJavascript中访问event:

function triggerJavascript(e){
   var element = e.target;
}

另见 this answer了解为什么需要 event 的更详细解释。

Demo ; Demo with text5 check :

<script>function triggerJavascript(e){        
    if(e.target.id === "text5")
        alert("text 5 hit");
    e.stopPropagation();
}
</script>
<div class="myDiv" onclick="triggerJavascript(event);" id="myDiv">
    <span id="text1">Text 1</span> <!-- closing tags -->
    <span id="text2">Text 2</span>
    <span id="text3">Text 3</span>
    <span id="text4">Text 4</span>
    <span id="text5">Text 5</span>
</div>