按下按钮确认的 JavaScript 警报框

Posted 2023-02-21

【中文标题】按下按钮确认的 JavaScript 警报框

【英文标题】：JavaScript alert box with confirm on button press

【发布时间】：2011-06-24 13:25:49

【问题描述】：

我有这个链接：

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

我想在用户单击 javascript 警告框时显示：“您确定要接受此回复作为您的支持吗？”有两个按钮，一个说“是”，这将允许该功能运行，另一个说“否”，这将取消回发并让用户留在页面上。

我该怎么做？谢谢:)

【问题讨论】：

onclick="return confirm(this.innerText+'?');"

【参考方案1】：

你可以写onclick="return confirm('Are you sure?');"。

confirm function 显示一个确定/取消对话框，如果用户单击确定，则返回 true。returning false 来自 onclick 处理程序将取消单击的默认操作。

【参考方案2】：

您可以通过点击确认轻松完成：

<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/Cancel 而不是 Yes/No。如果您真的想要是/否，则必须使用自定义对话框。

【讨论】：

您缺少右括号。 onClick 代码应该是onclick="return confirm('Are you sure you would like to accept this reply as your favor?');"

【参考方案3】：

由于其他答案涉及直接onclick，我想提出一个使用addEventListener 和preventDefault 方法的“更好”（IMO=在我看来）版本的解决方案。因为这样你可以绑定更多的 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/

【参考方案4】：

你可以使用这个功能：

myFunction() 
     var x;
     if (confirm("Are you sure?") == true) 
         x = "You pressed OK!";
      else 
         x = "You pressed Cancel!";
     
     return x; 

myFunction();