понимание обработчиков событий

Question

В качестве упражнения я пытаюсь добавить слушателя событий в элемент ebay.com.

Ожидаемый результат: показать предупреждение и остановить веб-страницу от перехода к следующему URL-адресу.

Что происходит: отображается предупреждение, но в любом случае отображается следующий URL.

Я нашел что-то интересное на страницах продукта, где я тестирую предупреждениеDefault, stopPropagtion и stopImmediatePropagation.

Независимо от того, какие комбинации я использую, ничего не работает.

Основной код -

$('#binBtn_btn').click(function(evt){ 
    alert('hi'); 
    evt.stopPropagation(); //or any other option. 
}); 

Дело в том, что я получаю предупреждение, но он все еще идет к следующей странице, как если бы я никогда не прекращал распространение.

Я прочитал много статей о обработке событий, но я не смог найти ответ. Ваша помощь очень ценится.

Answer 1

Мое лучшее предположение, что кнопка имеет свой собственный обработчик кликов, и он стреляет перед вашим.

$('#binBtn_btn').data("events") показывает, что действительно есть событие click. Удалите это с помощью off.

$('#binBtn_btn').off('click'); 

Нажатие кнопки теперь по-прежнему вызывает форму submit, так как все, что мы делаем, это просмотр страницы. Кнопка на самом деле всего лишь тег a.

$('#binBtn_btn').click(function(e){ 
    alert('Gotcha!'); 
    e.preventDefault(); 
}); 

Давайте посмотрим, что произойдет, если мы удалим их обработчик, добавьте наш, а затем повторно добавить их один ...

var existing = $('#binBtn_btn').data('events').click[0]; 
$('#binBtn_btn').off('click'); 
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); return false; }); 
$('#binBtn_btn').data('events').click.push(existing); 

То же самое, но только глядя на функции для обработчик мышей (вместо тонкой настройки events.click массива непосредственно ...)

var existing = $('#binBtn_btn').data('events').click[0].handler; 
$('#binBtn_btn').off('click'); 
$('#binBtn_btn').click(function(e){ alert('foo'); e.stopImmediatePropagation(); e.preventDefault(); }); 
$('#binBtn_btn').click(existing); 

Как ожидают ed, что теперь второй обработчик - их обработчик - не первый. (Я добавил return false;, а не e.preventDefault();, просто чтобы продемонстрировать различные способы делать вещи!)

Вы можете проверить, что они делают, помещая точку останова и просмотр existing вара выше. Вы увидите, что в конце своей функции они действительно называют e.preventDefault();.

Надеюсь, это поможет.

Answer 2

попробовать использовать evt.preventDefault() так:

$('#binBtn_btn').click(function(evt){ 

    evt.preventDefault(); 
    alert('hi'); 

}); 

Тогда он не будет перейти к следующей странице.