Howto: div onclick dentro de otro div con onclick javascript

sólo una pregunta rápida. Estoy teniendo un problema con divs con onclick javascript dentro de cada uno de los otros. Cuando hago clic en el interior de la div sólo debe fuego es onclick javascript, pero el exterior del div javascript es también de ser despedido. ¿Cómo puede el usuario haga clic en el interior de la div sin disparar el exterior del div javascript?

<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
    <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
InformationsquelleAutor Daniel Brink | 2010-03-05

11 Kommentare

  1. 92

    Básicamente existen dos modelos de eventos en javascript. La captura de eventos y la propagación de los Eventos. En la propagación de los eventos, si usted haga clic en el interior de la div, el interior div evento click primero y luego el exterior div haga clic en disparó. mientras que en el caso de la captura, la primera el exterior div evento disparado y que el interior div evento disparado. Para detener la propagación de eventos, utilice este código en el método click.

       if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
    • gracias, una simple respuesta clara y funciona a la perfección
    • Gracias. Excelente respuesta; justo lo que estaba buscando.
  2. 18

    Echa un vistazo a la información sobre la propagación de eventos aquí

    En particular, usted querrá algunos código como este en sus controladores de eventos para eventos de detención de la propagación:

    function myClickHandler(e)
    {
        //Here you'll do whatever you want to happen when they click
    
        //now this part stops the click from propagating
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
    }
    • Gracias! esto funcionó para mí
  3. 6

    Sólo agregue este código :

    window.event.stopPropagation();
    • Esto no funciona para mí. La respuesta es más preciso.
  4. 5

    return false; desde el interior del div onclick función:

    <div onclick="alert('inner'); return false;" ...

    Lo que estás tratando es llamado la propagación de eventos.

    • El método que sugieren que en realidad no funcionan. (Al menos no en cualquiera de los navegadores acabo de doble marcada en– Firefox 3.6, IE8.) Tenga en cuenta que su enlace en realidad dice que el uso de un método diferente, que me dio en mi respuesta.
  5. 3

    Este es un caso de propagación de eventos.

    Puede utilizar

    e.cancelBubble = true; //IE

    y

    e.stopPropagation(); //FF
    • me llevó un tiempo entender, pero lo tengo ahora, thx
  6. 3

    Una forma más para los navegadores basados en webkit:

    <div onclick="alert('inner'); event.stopPropagation;" ...
    • esto funciona, pero como esto: onclick=»alert(‘interior’); evento.stopPropagation();»
    • Esto funcionó para mí y he probado en Opera (46), Cromo (59.0.3071.115), FireFox Developer (55.0b9 (32-bit)), Internet Explorer 11
  7. 0

    Aquí es algo más de referencia para ayudarle en la comprensión de la propagación de los eventos de javascript.

  8. 0

    Esto fue muy útil, pero no funcionó para mí.

    Lo que hice es descrito aquí.

    Así que me puso una condición para el exterior onclick evento:

    if( !event.isPropagationStopped() ) {
        window.location.href = url;
    }
  9. 0

    Puede utilizar

    JS:

        $("divOrClassThatYouDontWantToPropagate").click(function( event ) {
          event.stopPropagation();
        });

  10. 0

    Esto funcionó para mí en Jquery:

    $('#outer_element').click(function(event) {
        if(event.target !== event.currentTarget) return;
        alert("Outer element is clicked")                       
    });

    De esta manera, si el objetivo actual no es el mismo que el div externa, no hará nada. Puede implementar funciones normales en el niño los elementos.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea