evento - preventdefault submit javascript
El elemento clic de elemento secundario activa el evento de clic principal (5)
El método stopPropagation() detiene el burbujeo de un evento en elementos principales, lo que impide que se notifique a ningún controlador principal del evento.
Puede utilizar el método event.isPropagationStopped() para saber si este método alguna vez se llamó (en ese objeto de evento).
Sintaxis:
Aquí está la sintaxis simple para usar este método:
event.stopPropagation()
Ejemplo:
$("div").click(function(event) {
alert("This is : " + $(this).prop(''id''));
// Comment the following to see the difference
event.stopPropagation();
});
Digamos que tienes un código como este:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert(''parentDiv'');">
<div id="childDiv" onclick="alert(''childDiv'');">
</div>
</div>
</body>
</html>
No deseo desencadenar el evento parentDiv click cuando hago clic en childDiv , ¿cómo puedo hacer esto?
Actualizado
Además, ¿cuál es la secuencia de ejecución de estos dos eventos?
Enfrenté el mismo problema y lo resolví con este método. html:
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
Necesitas usar event.stopPropagation()
$(''#parentDiv'').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
Descripción: Impide que el evento burbujee en el árbol DOM, evitando que se notifique a ningún controlador principal del evento.
Sin jQuery: DEMO
<div id="parentDiv" onclick="alert(''parentDiv'');">
<div id="childDiv" onclick="alert(''childDiv'');event.cancelBubble=true;">
AAA
</div>
</div>