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>

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

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

Answer 1

您可以使用event.target以访问该元素。然而，为了获得这个元素，你必须onclick稍微改变你的属性：

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

然后您可以event访问triggerJavascript：

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 click 处理程序在实际triggerJavascript逻辑之前执行，所以这可能并不总是正常工作。