Event.preventDefault vs event.stopPropagation

Может кто-нибудь объяснить, в чем разница между event.preventDefault() и event.stopPropagation()?

У меня есть таблица, и внутри этой таблицы у меня есть тег img.

Когда я нажимаю тег img, я хочу увидеть всплывающее окно.

Но я также хочу остановить выбор нескольких строк, поэтому я использую:

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

Когда я использую код js, всплывающее окно не появляется;

Если я удалю код js, всплывающее окно работает.

$(".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);
                }
            });
            }
        });
});

Почему?

Ответы

Ответ 1

Я не эксперт Javascript, но насколько я знаю:

stopPropagation используется, чтобы убедиться, что событие не пузырится вверх по цепочке. например. нажатие на тег <td> также приведет к возникновению кликов на нем parent <tr>, а затем его родительский <table> и т.д. stopPropagation предотвратит это.

preventDefault используется для остановки нормального действия элемента, например. preventDefault в обработчике кликов по ссылке остановит отслеживаемую ссылку или кнопку отправки остановит отправку формы.

Ответ 2

  • stopPropagation для ребенка остановит это событие на родитель (все предки)
  • preventDefault для ребенка остановит событие на ребенке, но оно произойдет на нем родитель (и предки тоже!)

Теперь в вашем коде, который является родительским? который является ребенком? img является дочерним tr является родителем (ну, бабушка и дедушка, если честно). Так что догадайтесь, где должен быть код stopPropagation.

Ответ 3

Событие preventDefault Из W3C:

Метод event.preventDefault() останавливает действие по умолчанию для элемент от происходящего. Например:

Предотвратить отправку кнопки отправки из формы. Предотвратить связь. после URL

Событие stopPropagation Из W3C:

Метод event.stopPropagation() останавливает барботирование события для родительские элементы, предотвращающие использование каких-либо родительских обработчиков событий выполняется.