Question

我有一个div html元素，内联上设置了一个click事件（不是我想要的方式，而是遗留代码）。见这里

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

另请参阅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>

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>

的 DEMO

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逻辑之前执行，所以这可能并不总能正常工作。

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

4 个答案:

的 DEMO