JavaScript 2 onclick事件，但只做第一个

Question

我有一个JavaScript函数，当我点击一个元素时运行2次。看看我的代码，我只希望第一个调用将被完成，而不是第二个也:

<p class="chat" onclick="Open('chat')">
<img class="chatpicture" src="jpg/1.jpg" onclick="Open('user')">
</p>

当我点击图像，然后也p元素与他的onclick函数将运行。因为图像onclick位于p元素中p元素也有onclick

什么是最好的方法，只让图像onclick运行，而不是同时也运行p元素onclick?

Answer 1

您可以尝试使用Event.stopPropagation():

Event接口的stopPropagation()方法防止当前事件在捕获和冒泡阶段进一步传播。但是，它不会阻止任何默认行为的发生;例如，点击链接仍然会被处理。如果您想停止这些行为，请参见preventDefault()方法。

演示:

function Open(inputVal){
event.stopPropagation();
console.log(inputVal);
}

<p class="chat" onclick="Open('chat')">
<img class="chatpicture" src="jpg/1.jpg" onclick="Open('user')">
</p>

Answer 2

委托并测试类

const Open = str => console.log(str);
document.getElementById("container").addEventListener("click", e => {
const tgt = e.target;
if (tgt.classList.contains("chat")) Open('chat');
else if (tgt.classList.contains("chatpicture")) Open('user');
})

img { height:50px; }

<div id="container">
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
<p class="chat">
Start chat
<img alt"User details" class="chatpicture" src="https://cdn1.iconfinder.com/data/icons/managers-15/494/Untitled-32-512.png">
</p>
</div>