[解決済み] [Solved] How to display a confirmation dialog when clicking an <a> link?

Question

I want this link to have a JavaScript dialog that asks the user “ Are you sure? Y/N ”.

<a href="delete.php?id=22">Link</a>

If the user clicks “Yes”, the link should load, if “No” nothing will happen.

I know how to do that in forms, using onclick running a function that returns true or false . But how do I do this with an <a> link?

How to solved?

Inline event handler

最もシンプルな方法では、このように confirm() 関数をインラインの onclick ハンドラです。

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

高度なイベント処理

しかし、通常であれば HTMLとJavascriptを分離する だから、インライン・イベント・ハンドラを使わずに、リンクにクラスを付けて、それにイベント・リスナーを追加することをお勧めします。

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

この例 はモダンブラウザでのみ動作します（古いIEでは attachEvent() , returnValue の実装を提供し getElementsByClassName() または、クロスブラウザの問題を解決するjQueryのようなライブラリを使用します)。詳しくは この高度なイベント処理方法については、MDN .

jQuery

jQueryのファンボーイと思われないようにしたいのですが、DOM操作とイベントハンドリングは、ブラウザの違いによって最も役立つ2つの分野です。ちょっと面白いので、次のように表示します。 jQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>