314
4

9 に答える 9

696

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

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>
于 2012-05-05T14:38:27.927 に答える
18

インライン 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 フィドルのデモ。

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

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 フィドルのデモ。

使用するやや遅れた更新（以下のコメントでbažmegakapaaddEventListener()によって提案されているように）：

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 フィドルのデモ。

上記は、個々のリンクのイベントに関数をバインドします。次のように、(委譲を使用して) イベント処理を祖先要素にバインドできる場合、これは潜在的に非常に無駄です。

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 フィドルのデモ。

イベント処理はbody、通常、他のクリック可能な要素のホストを含​​む要素に関連付けられているため、暫定関数 ( actionToFunction) を使用して、そのクリックをどうするかを決定しました。クリックされた要素がリンクであり、したがってtagNameof があるa場合、クリック処理が関数に渡されreallySure()ます。

参考文献:

于 2012-05-05T14:39:37.857 に答える
15 
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
于 2012-05-05T14:38:59.293 に答える
0

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

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?' );
    }
};

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

于 2012-05-05T15:49:05.910 に答える
0

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);
于 2012-05-05T14:46:40.013 に答える
-1

プロンプトに PHP、HTML、JAVASCRIPT を使用する

誰かが単一のファイルでphp、html、およびjavascriptを使用しようとしている場合、以下の答えが私のために働いています..リンクに使用済みのブートストラップアイコン「ゴミ箱」を添付しました。

<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コードを使ったのは、最初から使えないからです..

以下のコードは私にとってはうまくいきません:-

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>";

そして、最初のコードのように変更し、必要なものとして実行しました..私のケースを必要としている誰かを助けることができることを願っています.

于 2017-01-03T06:17:46.437 に答える