Добавление события click через addEventListener для подтверждения навигации по гиперссылке

Я пишу какой-то JavaScript, который, по сути, хочу сделать, это подтвердить, когда пользователь нажимает ссылку, которую они действительно хотят щелкнуть по ней.

В настоящее время мой код выглядит следующим образом:

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++)
{
    Anchors[i].addEventListener("click", function () { return confirm('Are you sure?'); }, false);
}

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

Я полагаю, что проблема связана с моим использованием addEventListener (или ограничением его реализации), потому что, если я добавлю вручную записать в HTML файл следующее, поведение будет именно таким, чего я ожидал бы:

<a href="#" onclick="location.href='http://www.google.com'; return false;" onclick="return confirm('Are you sure?')">Google</a><br />

Ответы

Ответ 1

Я изменил вашу функцию onclick, чтобы включить вызов event.preventDefault(), и, похоже, это заработало:

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++) {
    Anchors[i].addEventListener("click", 
        function (event) {
            event.preventDefault();
            if (confirm('Are you sure?')) {
                window.location = this.href;
            }
        }, 
        false);
}

(см. http://jsfiddle.net/ianoxley/vUP3G/1/)

Ответ 2

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

См. Как использовать функцию addEventListener() для Javascript для переопределения поведения по умолчанию() для HTML-формы по умолчанию

- EDIT -

Мы увидим, что вы ответили сами, пока я редактировал ответ

Ответ 3

_{Решение, снятое с вопроса "Оригинальный плакат"}

После еще нескольких поисков я нашел ответ здесь, на Stack Overflow: Возврат false из обработчика кликов не работает в Firefox

Если кто-то находит этот вопрос вместо другого, в основном при использовании метода addEventListener для проводки событий, вы не можете просто использовать return false; чтобы отменить действие, вы должны использовать метод preventDefault() события, поэтому мой код сверху теперь стал следующим:

Anchors[i].addEventListener("click", function (event) { 
    if (!confirm('Are you sure?')) { event.preventDefault(); } 
}, false);