web-dev-qa-db-ja.com

ボタンを押して確認するJavaScriptアラートボックス

私はこのリンクを持っています:

<p id="accept-favor"><a title="Accept this Favor" href="?wp_accept_favor=<?php comment_ID(); ?>">Accept this Favor</a></p>

ユーザーがクリックしたときにJavaScriptアラートボックスを表示したい:「この返信をあなたの好意として受け入れてもよろしいですか?」 2つのボタンは、機能を実行できるようにする「はい」と、ポストバックをキャンセルしてユーザーをページ上に保持する「いいえ」という2つのボタンで構成されます。

どうすればいいですか?ありがとう:)

26
Cameron

確認onclickで簡単に実行できます。

<p id="accept-favor"><a title="Accept this Favor" 
  href="?wp_accept_favor=<?php comment_ID(); ?>" 
  onclick="return confirm('Are you sure you would like to accept this reply as your favor?');"
  >Accept this Favor</a></p>

ただし、[はい/いいえ]ではなく[OK /キャンセル]と表示されます。はい/いいえが本当に必要な場合は、カスタムダイアログを使用する必要があります。

36
Kaleb Brasee

onclick="return confirm('Are you sure?');"と書くことができます。

confirm function は、[OK /キャンセル]ダイアログを表示し、ユーザーが[OK]をクリックするとtrueを返します。
returning falseハンドラーからのonclickは、クリックのデフォルトアクションをキャンセルします。

21
SLaks

この機能を使用できます:

myFunction() {
     var x;
     if (confirm("Are you sure?") == true) {
         x = "You pressed OK!";
     } else {
         x = "You pressed Cancel!";
     }
     return x; 
}
myFunction();
9
sailaja.p

他の回答が直接onclickについて話すので、addEventListenerpreventDefaultメソッド。この方法では、より多くのclickハンドラーをバインドできるためです。

[〜#〜] html [〜#〜]

<a href="#" id="confirmClickActionElementId">click me</a>

JavaScript

document
    .getElementById("confirmClickActionElementId")
    .addEventListener("click", function( e ){ //e => event
        if( ! confirm("Do you really want to do this?") ){
            e.preventDefault(); // ! => don't want to do this
        } else {
            //want to do this! => maybe do something about it?
            alert('Ok, lets do this!');
        }
    });

フィドル: http://jsfiddle.net/ouyf86ya/

...または古い「return」の方法:

document
    .getElementById("confirmClickActionElementId")
    .addEventListener("click", function(  ){ 
        return confirm("Do you really want to do this?") ;
    });

フィドル: http://jsfiddle.net/y2jLpkbb/

0
jave.web