web-dev-qa-db-ja.com

<a>リンクをクリックしたときに確認ダイアログを表示する方法

このリンクにユーザに「 よろしいですか」と尋ねるJavaScriptダイアログを表示させます。 Y/N ”.

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

ユーザーが「はい」をクリックした場合はリンクがロードされ、「いいえ」の場合は何も起こりません。

onclickまたはtrueを返す関数を実行するfalseを使用して、フォームでそれを行う方法を知っています。しかし、どうすればこれを<a>リンクで行うことができますか？

javascripthtmljavascript-events
223
Christoffer

インラインイベントハンドラ

最も簡単な方法では、インラインonclickハンドラで confirm() 関数を使用できます。

<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>
506
kapa

インラインJavaScriptを避けることをお勧めします。

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

JS Fiddleデモ 。

明快さ/機能を維持しながら、スペースを減らすために上記を更新しました：

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

JS Fiddleデモ 。

（以下のコメントで bažmegakapa によって示唆されているように）addEventListener()を使用するためのやや遅れたアップデート。

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

JS Fiddleデモ 。

上記はそれぞれの個々のリンクのイベントに機能を結び付けます。次のように、イベント処理を（委任を使用して）先祖要素にバインドできる場合、これは非常に無駄になります。

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

JS Fiddleデモ 。

イベント処理はbody要素に関連付けられているため、通常は他のクリック可能な要素のHostが含まれています。そのクリックの処理方法を決定するために暫定関数（actionToFunction）を使用しました。クリックされた要素がリンクであり、したがってtagNameのaを持つ場合、クリック処理はreallySure()関数に渡されます。

参考文献：

14
David Thomas
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
13
coder

これも試すことができます。

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>
3
Wolfack

jAplus

JavaScriptコードを書かずにそれを実行できます

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

デモページ

1
erik

プロンプト表示にPHP、HTML、およびJavaScriptを使用する

1つのファイルで php、html、およびjavascript の使用をお探しの場合は、以下の回答が役に立ちます。リンクのブートストラップアイコン "trash"を使用して添付します。

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

途中で php codeを使ったのは、最初からそれを使うことができないからです。

以下のコードは私にはうまくいきません： - 

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

そして、私は最初のコードのようにそれを修正し、それから私は私が必要としているものだけで走ります。

0
Shah Abd Hafiz

AddEventListener（またはattachEvent）を使用してイベントハンドラをアタッチする場合、このメソッドは上記のどちらの回答とも少し異なります。

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

このハンドラは次のいずれかで添付できます。

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

またはInternet Explorerの古いバージョンの場合：

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
0
Chad Killingsworth

楽しみのために、アンカータグに all イベントを追加するのではなく、ドキュメント全体で単一のイベントを使用します。

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

多くのアンカータグがある場合、この方法はより効率的です。もちろん、すべてのアンカータグを持つコンテナにこのイベントを追加するとさらに効率的になります。

0
Florian Margaine