event.preventDefault против 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);
                }
            });
            }
        });
});

Почему?


javascript jquery stoppropagation preventdefault
person Ionut Flavius Pogacian    schedule 09.08.2013    source источник
comment
Это поможет вам davidwalsh.name/javascript-events   -  person L10    schedule 09.08.2013
comment
Пожалуйста, покажите свою структуру html, чтобы мы знали, где находится изображение по отношению к структуре таблицы.   -  person Huangism    schedule 09.08.2013
comment
Слишком поздно останавливать выбор на click; используйте mousedown.   -  person canon    schedule 09.08.2013

Ответы (3)


arrow_upward
38
arrow_downward

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

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

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

person sevenseacat    schedule 09.08.2013
comment
@CrisimIlNumenoreano, ваш комментарий не имеет смысла. ответ Sevenseacat выглядит для меня на 100% правильным, и его можно проверить с помощью ответов на двойной вопрос, а также документацию jQuery для event.preventDefault() и event.stopPropagation(). - person Trisped; 18.05.2015
comment
StopPropagation также останавливает фазу захвата? - person Harry Moreno; 28.12.2015
comment
Я думаю, что путаница вокруг этих двух функций (три, если считать stopImmediatePropagation) связана с сомнением в том, что остановка распространения автоматически предотвращает также и дефолт. Кажется, может. - person doug65536; 20.02.2016

arrow_upward
8
arrow_downward

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

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

person Community    schedule 09.08.2013
comment
У меня складывается впечатление, что это неправильно. Я думаю, что stopPropagation НЕ останавливает действие ребенка? - person user1884155; 17.01.2014
comment
Вы, вероятно, говорите о preventDefault, но мой комментарий был направлен на объяснение stopPropagation. Пользователь rps исправил свой ответ после моего комментария. - person user1884155; 19.05.2015
comment
@Trisped, @user1884155 прав, пример, который вы говорите, похоже, относится к preventDefault. И изначально я сделал ошибку, сказав, что stopPropagation также остановит любые дочерние события, что позже было исправлено пользователем @user1884155. - person ; 19.05.2015
comment
@ user1884155 Извините, ошибка копирования и вставки. Должно было быть preventDefault, как вы сказали. - person Trisped; 20.05.2015

arrow_upward
7
arrow_downward

Событие preventDefault От W3C:

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

Предотвратить отправку формы кнопкой отправки Запретить ссылку после URL-адреса

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

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

person Fals    schedule 09.08.2013