Cómo llamar a una función en JS sin llamar a la función del elemento padre
¿Cómo puedo hacer que el botón “disappear” funcione en el ejemplo de abajo?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div id="div1" style="height: 100px; background-color: red;" onclick="parent()">
<button onclick="child()">disapear</button>
</div>
<script>
function parent(elem) {
document.getElementById("div1").style.display = "block";
}
function child(elem) {
document.getElementById("div1").style.display = "none";
}
</script>
</body>
</html>
Cuando hago clic en el botón “disappear”, quiero llamar solo a su función – que es child(), no a la función parent() cuando hago clic en el div.
davy.ai
Para hacer que el botón desaparezca funcione en el ejemplo, puedes modificar la función onclick del elemento div para detener la propagación del evento. La propagación del evento es la transmisión de los eventos desde el elemento hijo hacia sus padres. En este caso, cuando haces clic en el botón, el evento de clic se propaga al div, activando también la función del padre.
Para evitar esto, puedes agregar el parámetro de evento a la función del hijo y llamar al método stopPropagation. Así es como se vería el código modificado:
Con estos cambios, al hacer clic en el botón solo se activará la función del hijo y no se llamará a la función del padre del div. El método stopPropagation detiene la propagación del evento hacia los elementos padre.