Question

我有一个js函数，比如check（val）。我在body上的click事件和一个标签上调用它。当我点击身体时，它正确显示了身体元素的id。但是，当我点击它时，它会显示两者和身体的ID！

我只想显示点击和身体点击事件的ID，以及其他一些要执行的动作。

我的示例HTML代码：

<body id="body" onclick="check(this.id);">
    <a href="#" id="ele" onclick="check(this.id)">Hello</div>
</body>

JS代码：

function check(val)
{
    if(val=="ele"){
    alert("element is clicked");
    }else if(val=="body"){
    alert("Body is clicked");
    }
}

Answer 1

您需要stop Propagation of event使用event.stopPropagation()方法。已经@StephenThomas在你的问题的评论中提到了这一点。

试试这个，

HTML标记：

<body id="body" onclick="check(event,this.id);">
    <a href="#" id="ele" onclick="check(event,this.id)">Hello</div>
</body>

javascript代码：

function check(event, val) {
    if (val == "ele") {
        alert("element is clicked");
        event.stopPropagation();  //here we stop propagation of the event
    } else if (val == "body") {
        alert("Body is clicked");
    }
}

见DEMO。

我希望这会对你有所帮助......

Answer 2

每个浏览器都以不同方式处理事件冒泡。有些会显示两者，有些只会显示链接。您可以更改函数以适合每个单击的元素：

function check(val)
{
    alert("Clicked element type is: " + val.nodeName);
}

这样您就不需要任何ID检测，因为您检查了节点本身的类型。

Answer 3

你得到两个ids，因为当你点击锚时你也点击了身体，因为锚是身体元素的孩子。

Answer 4

重要提示：当你点击锚时你也点击了身体

像这样使用

  <body id="body" onclick="check(this);">

    <a href="#" id="ele" onclick="check(this);">Hello</a>
    </body>

<强>的Javascript

 function check(val)
    {
        if(val.id.toString()=="ele"){
        alert("element is clicked");
        }else if(val.id.toString()=="body"){
        alert("Body is clicked");
        }
    }

Javascript在点击事件中显示正文和点击元素的ID

4 个答案: