识别div中哪个span标记触发了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>

我想做的是识别点击事件源自test5的哪个span标记，然后不要执行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;
}

有关为什么需要event的更详细解释，请参见此答案。

演示带有text5检查的演示：

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

Answer 2

不能使用onclick="triggerJavascript();"，否则事件目标（单击的跨度）将不会传递给事件处理程序。

既然您声明您正在使用jQuery，请使用以下内容：

$('#myDiv').click(function(evt) {
    alert("The target is: " + evt.target.id);
});

Answer 3

HTML

<div class="myDiv" onclick="triggerJavascript(event);" 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>
</div>

JavaScript

<script type="text/javascript">
   function triggerJavascript(event) {
      // event.target will catch the clicked element
      if (event.target.id !== 'text5') {
          // do something
      }
   }
</script>

演示

Answer 4

如果您不能更改HTML，您可以尝试以下操作：

var triggerJavascript = (function(){
    var clicked;
    $("#myDiv span").click(function(e){
        clicked = $(e.target).attr("id");
    });
    return function() {
        if (clicked == "text5") {
            return;
        }
        //do something cool...
    }
})();

虽然我猜，但不能保证jQuery点击处理程序在实际的triggerJavascript逻辑之前执行，所以这可能并不总是正确的。