Aquí está el ejemplo para la construcción del elemento UI,
HTML
<div class='wrap'> <a class='inner-link' href="#">Link</a> </div>CSS
.wrap { background:#CDD4E0; width:300px; height:100px; padding:20px; } .wrap:hover { background:#868B93; }jQuery
$('.wrap').click(function () { alert("Handler for wrap container click."); }); $('.inner-link').click(function () { alert("Handler for inner link click"); }); Lo que quiero hacer es evitar que el contenedor con la clase .wrap haga clic en el evento cuando hago clic en el enlace que se encuentra dentro.
Puede hacer referencia a este ejemplo de violín .
El código actual dispara $('.wrap').click cuando lo hago para $('.inner-link').click .
Agregue if para verificar si el objetivo no contiene la clase inner-link .
ACTUALIZACIÓN: Oh, el comentario tiene una mejor manera de resolverlo.
$(".wrap").click(function (e) { if (e.target.className !== "inner-link") { // add this alert("Handler for wrap container click."); } }); $(".inner-link").click(function (e) { e.stopPropagation(); // or add this alert("Handler for inner link click"); });Intenta usar event.stopPropagation
Sus códigos jQuery deben modificarse de la siguiente manera:
$('.wrap').click(function () { alert("Handler for wrap container click."); }); $('.inner-link').click(function (event) { event.stopPropogation(); alert("Handler for inner link click"); });