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

Question

Я пишу некоторый 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="http://www.google.com" onclick="return confirm('Are you sure?')">Google</a><br />

Answer 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/)

Answer 2

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

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

- EDIT -

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

Answer 3

_{Решение, полученное из оригинального вопроса плаката}

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

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

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