Dos diferentes OnClick en dos divs, uno sobre el otro

Question

Tengo dos divs, uno grande y uno más pequeño sobre el otro, cada div tiene su propio método OnClick. El problema que tengo es cuando hago clic en el div más pequeño, también se llama el método OnClick del gran div.

¿Quién puede evitar eso?

Answer 1

La mejor manera de detectar qué elemento se ha hecho clic es analizar objeto de evento (evento Click). He preparado un pequeño ejemplo para este caso. Puedes verlo en el código a continuación.

 
function amIclicked(e, element) 
{ 
    e = e || event; 
    var target = e.target || e.srcElement; 
    if(target.id==element.id) 
     return true; 
    else 
     return false; 
} 
function oneClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('One is clicked'); 
    } 
} 
function twoClick(event, element) 
{ 
    if(amIclicked(event, element)) 
    { 
     alert('Two is clicked'); 
    } 
} 

Este método javascript puede ser llamado antes de ejecutar la secuencia de comandos

Ejemplo

 
<style> 
#one 
{ 
    width: 200px; 
    height: 300px; 
    background-color: red; 
} 
#two 
{ 
    width: 50px; 
    height: 70px; 
    background-color: yellow; 
    margin-left: 10; 
    margin-top: 20; 
} 

</style> 



<div id="one" onclick="oneClick(event, this);"> 
    one 
    <div id="two" onclick="twoClick(event, this);"> 
     two 
    </div> 
</div> 

espero que esto ayude.

Answer 2

Su problema es que el evento click se propagará por el árbol de elementos. Por lo tanto, cada elemento que contiene un elemento al que se hizo clic también activará un evento click.

La solución más simple es agregar return false a su controlador.

Si está utilizando jQuery, puede llamar e.stopPropagation(); de lo contrario, tendrá que llamar e.stopPropagation() si existe, y establecer event.cancelBubble = true.

Para obtener más información, vea here.

Answer 3

Si decide utilizar una biblioteca de JavaScript como www.jquery.com, puede lograr fácilmente lo que está tratando de hacer utilizando las opciones de prevención de propagación.

Answer 4

Con lo que se trata es de un evento burbujeante. Eche un vistazo a este artículo: http://www.quirksmode.org/js/events_order.html.

Básicamente, para detener el evento de pasar al elemento padre, se puede usar algo como esto:

document.getElementById('foo').onClick = function(e) { 

    // Do your stuff 

    // A cross browser compatible way to stop propagation of the event: 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

Answer 5

Usted está ejecutando en un caso común de la propagación de eventos. Consulte quirksmode.org para obtener los detalles completos de lo que está sucediendo exactamente. Básicamente, lo que hay que hacer en el controlador de clic del div más pequeña es la siguiente:

if (!e) var e = window.event; 
e.cancelBubble = true; 
if (e.stopPropagation) e.stopPropagation();