web-dev-qa-db-ja.com

ハイパーリンクからのナビゲーションを確認するための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="http://www.google.com" onclick="return confirm('Are you sure?')">Google</a><br />
javascriptjavascript-eventshyperlinkaddeventlistener
12
Andy

私はあなたの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/ を参照）

39
Ian Oxley

デフォルトのイベントハンドラの実行を防止する必要があります。

JavaScriptのaddEventListener（）を使用してHTMLフォームのデフォルトのsubmit（）動作をオーバーライドする方法を参照してください

-編集-

私が答えを編集しているときにあなたが自分で答えたのを見ました

1
Toni Toni Chopper

元のポスターの質問から抜粋した解決策

さらに検索した結果、Stack Overflowで答えが見つかりました： Firefoxではクリックハンドラーからfalseを返すことができません

誰かがこの質問の代わりにこの質問を見つけた場合、基本的にイベントのワイヤリングにaddEventListenerメソッドを使用するときは、単にreturn falseを使用することはできません。アクションをキャンセルするには、代わりにイベントのpreventDefault()メソッドを使用する必要があるため、上記のコードは次のようになります。

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