not - preventdefault javascript

event.preventDefault vs event.stopPropagation

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es la diferencia entre event.stopPropagation y event.preventDefault? 7 respuestas

Alguien puede explicar cuál es la diferencia entre event.preventDefault() y event.stopPropagation() ?

Tengo una tabla y dentro de esa tabla tengo una etiqueta img.

Cuando hago clic en la etiqueta img, quiero ver una ventana emergente.

Pero también quiero detener la selección de varias filas, así que uso:

$("table.items tbody tr").click(function(event) {
        event.stopPropagation();
    });

Cuando uso el código js, ​​no aparece la ventana emergente;

Si borro el código js, ​​la ventana emergente funciona.

$(".info").live("click",function(e){
    //console.log(''ok'');
    e.stopPropagation();
    var elem = $(this);
    var id = $(this).attr("id").replace("image_","container_");
    $(''#''+id).toggle(100, function() {
        if($(this).css(''display'') == ''block'') {
            $.ajax({
                url: "$url",
                data: { document_id:elem.attr(''document_id'') },
                success: function (data) {
                    $(''#''+id).html(data);
                }
            });
            }
        });
});

¿Por qué?

Answer 1

Evento preventDefault De W3C:

El método event.preventDefault () detiene la acción predeterminada de un elemento para que no ocurra. Por ejemplo:

Impedir que un botón de envío envíe un formulario Impedir que un enlace siga la URL

Event stopPropagation De W3C :

El método event.stopPropagation () detiene la propagación de un evento a los elementos principales, lo que impide que se ejecuten los controladores de eventos principales.

Answer 2

No soy un experto en Javascript pero por lo que sé:

stopPropagation se utiliza para asegurarse de que el evento no haga stopPropagation la cadena. p.ej. un clic en una etiqueta <td> también activaría eventos de clics en su <tr> , y luego en su <table> padre, etc. stopPropagation evita que esto suceda.

preventDefault se utiliza para detener la acción normal de un elemento, por ejemplo. preventDefault en un controlador de clic en un enlace detendría el enlace que se está siguiendo, o en un botón de envío dejaría de enviar el formulario.

Answer 3

• stopPropagation en un niño evitará que ese evento suceda en el padre (todos los ancestros)
• preventDefault en un niño detendrá el evento en el niño, pero ocurrirá en su padre (¡y también en los antepasados!)

Ahora en tu código cual es el padre? cual es el niño img is child tr es padre (bueno, abuelo para ser honesto), así que adivina dónde debería estar el código de stopPropagation .