单击时从div函数中排除按钮

Question

我有一个问题，不知道如何解决。我定义了一个div，其中有一个按钮。单击div时，会调用一个函数。我想将按钮从函数中排除，也就是说，当单击按钮时，函数不会被调用，但当单击div的任何其他内容时，函数将被执行。

类似这样的东西：

<div onclick="function('ID_other_DIV');">
Click here<br /> 
X<br /> 
X<br /> 
X<br /> 
<button id="toggle_instalation" @click="doSomething">Do something</button><br />
X<br /> 
X<br /> 
</div>

我尝试使用javascript在函数中添加这样的内容：

var x = document.getElementById(element);
if (x.id === 'toggle_installation') {
return;
} 

不幸的是，这不起作用，因为我的函数有一个div作为元素传递，而不是一个按钮。

谢谢你的帮助。

Answer 1

1. 您可以通过多种方式实现。我认为做得更好检查是否

e.target.tagName

与您的按钮标签匹配。检查TechySharnav的答案。

2. 使用e.stopPropagation((停止子元素进行干扰这是父母标签的功能

<div id="div">
Click here<br /> 
X<br /> 
X<br /> 
X<br /> 
<button id="toggle_instalation">Do something</button><br />
X<br /> 
X<br /> 
</div>

<script>
const div = document.getElementById('div');
const toggle_instalation = document.getElementById('toggle_instalation');

const doSomething = (e)=>{
div.style.backgroundColor = 'red'
}

div.addEventListener('click', doSomething)

toggle_instalation.addEventListener('click', (e)=>{
e.stopPropagation()

}) </script> 

3. 通过单击按钮删除事件侦听器

toggle_instalation.addEventListener('click', (e)=>{ 
div.removeEventListener('click', doSomething)

}) 

Answer 2

您需要将event对象传递给函数，并检查是否使用tagName属性单击了button元素。

function A(e, id) {
if (e.target.tagName != "BUTTON") {
console.log(id); /*Your code goes here*/
}
}

<div onclick="A(event, 'ID_other_DIV');">
Click here<br /> X
<br /> X
<br /> X
<br />
<button id="toggle_instalation" @click="doSomething">Do something</button><br /> X
<br /> X
<br />
</div>

Answer 3

您需要单击按钮触发函数中的event.stopPropagation()，以防止其冒泡到父级

这允许按钮上的单击处理程序不注册到parentdiv中，因此单击按钮只会触发functionTwo()。正如@TechySharnav所指出的，您需要将事件对象传递到函数中，以便停止程序。

请注意，我在这里使用的是内联函数调用程序，以匹配您的调用程序，但我建议您通过addEventListeners('click', xyz)进行调用

function functionOne(event) {
console.log("function one was called")
}
function functionTwo(event) {
event.stopPropagation();
console.log("function two was called")
}

<div onclick="functionOne(event)">
Click here<br /> 
X<br /> 
X<br /> 
X<br /> 
<button id="toggle_instalation" onclick="functionTwo(event)">Do something</button><br />
X<br /> 
X<br /> 
</div>