javascript - evento - onclick jquery html
¿Cómo evitar que el evento onclick en div se propague al documento? (6)
¿Quiero detener la propagación del evento onclick de este div al documento? Cuando el usuario hace clic en el "div", aparecen ambas alertas: 1) la alerta del div y 2) la alerta del documento. Quiero suprimir la alerta de documentos.
Sé cómo hacerlo utilizando addEventListener, pero ¿hay otra forma de hacerlo? El problema a continuación es que no sé cómo conocer el evento. Probé "event = element.onclick", que se muestra a continuación, pero eso no funciona. ¿Cómo consigo el evento?
<head>
<script>
function showMenu(element) {
alert("div clicked");
event = element.onclick; // HOW TO GET HOLD OF THE EVENT?
// Don''t propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
}
document.onclick = function() {
alert(''document clicked'');
};
</script>
</head>
<body>
<div id="foodmenu" onclick="showMenu(this);">Click inside this div</div>
or click outside the div.
</body>
Añade el onclick al elemento del cuerpo.
Bueno, eso es un código jquery. $ ("# id") igual que document.getElementById ("id")
La función .click es la misma que addEvent ("click", function () {...});
Básicamente, tanto las funciones allí son los controladores de clic para los DIV de padres e hijos.
Observe la salida al comentar / descomentar el "retorno falso"; declaración.
Espero que ayude.
Por cierto, perdón por esa confusión "$".
Cambia la definición de tu función para incluir el evento:
function showMenu(event, element) {
alert("div clicked");
// Don''t propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
}
Luego cambia la llamada para pasar en el evento:
div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>
Douglas, hace que el evento no se haga burbujear.
Mira esto http://jsbin.com/ahoyi/edit
aquí, si comenta la declaración de alerta, mostrará 2 alertas al hacer clic en el cuadro más pequeño, solo en uno.
Espero que esto ayude.
Pruebe EventListeners:
html:
<div id="fooddmenu">Click inside this div</div>or click outside the div.
js
function showMenu(e) {
alert("div clicked");
}
document.onclick = function() {
alert(''document clicked'');
};
window.onload = function(){
document.getElementById("fooddmenu").addEventListener("click", function(e){
showMenu(this);
e.stopPropagation();
});
};
$("div").click(function(){
...
...
...
return false; //this will stop the further propagation of the event
});