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() останавливает барботирование события для родительские элементы, предотвращающие использование каких-либо родительских обработчиков событий выполняется.