简单的JavaScript问题：onClick确认未阻止默认操作

Question

我正在制作一个简单的删除链接，并使用onClick事件来弹出确认对话框。我想确认用户是否要删除一个条目。但是，当在对话框中点击取消时，似乎默认操作（即href链接）仍然会发生，因此该条目仍然被删除。不确定我做错了什么...非常感谢任何建议。

编辑：实际上，现在代码的方式是，页面甚至不会调用函数...所以根本没有对话框出现。我的onClick代码是：

onClick="confirm('Delete entry?')"

弹出了一个对话框，但仍会转到“取消”链接。

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script type="text/javascript">

function delete() {
    return confirm('Delete entry?')
}

</script>


...

<tr>
 <c:if test="${userIDRO}">
    <td>
        <a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}"/>" />
        <img src="images/edit.GIF" ALT="Edit this skill." border="1"/></a>
    </td>
    <td>
        <a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}&remove=1"/>" onClick="return delete()"/>
        <img src="images/remove.GIF" ALT="Remove this skill." border="1"/></a>
    </td>
 </c:if>
</tr>

- kchau

Answer 1

你的代码中有一个错别字（标签a关闭得太早了）。 你可以使用以下方法之一：

<a href="whatever" onclick="return confirm('are you sure?')"><img ...></a>

注意返回值 (confirm):脚本在内置事件中返回的值决定是否运行默认浏览器操作; 如果你需要运行一大段代码，你当然可以调用另一个函数:

Note the return (confirm): the value returned by scripts in intrinsic events decides whether the default browser action is run or not; in case you need to run a big piece of code you can of course call another function:

<script type="text/javascript">
function confirm_delete() {
  return confirm('are you sure?');
}
</script>
...
<a href="whatever" onclick="return confirm_delete()"><img ...></a>

（注意delete是一个关键词）

为了完整起见：现代浏览器还支持DOM事件，允许您在每个对象上注册多个处理程序以响应相同的事件，访问事件的详细信息，停止传播等等。请参见DOM事件。

- Luca Tettamanti

---

onClick="return confirm('Are you absolutely sure you want to delete?')" - Muhammad Fahad

Answer 2

嗯，我曾经也遇到过同样的问题，而且问题是通过在 confirm 前添加单词 "return" 来解决的：

onclick="return confirm('Delete entry?')"

希望这对你有所帮助。

祝你好运！

- Araceli

---

你确定这个能用吗？它让我确认，但是即使选择了取消，链接操作仍然会执行... - Gediminas Šukys

@Gediminas 你用的是哪个操作系统/浏览器？ - Adam

抱歉，某些其他代码块在此行上引起了错误。它在普通的HTML示例中运行良好。 - Gediminas Šukys

Answer 3

我使用这个，非常好用。不需要任何函数，只需与您的链接内联即可。

onclick="javascript:return confirm('Are you sure you want to delete this comment?')"

- smazurov

---

也没有必要使用“javascript：”。但是像siukurnin所说，如果您更改了某些内容，则应使用POST。 - some

Answer 4

我遇到了类似的问题（点击按钮后，即使取消点击，它仍然会删除我的对象），所以我这样做了，希望它能帮助未来的某个人：

 $('.deleteObject').click(function () {
    var url = this.href;
    var confirmText = "Are you sure you want to delete this object?";
    if(confirm(confirmText)) {
        $.ajax({
            type:"POST",
            url:url,
            success:function () {
            // Here goes something...
            },
        });
    }
    return false;
});

- Gytis

Answer 5

对于像删除记录这样的操作，使用简单的链接看起来很危险：如果网络爬虫试图索引您的页面呢？ 它会忽略任何JavaScript并跟随每个链接，这可能不是一个好事情。

最好使用method="POST"的表单。

然后您将拥有一个"OnSubmit"事件来执行您想要的操作...

- siukurnin

---

这是一个很好的观点。它不仅可能会对您的应用程序造成潜在的危险，而且实际上违反了HTTP规范。 - Peter Bailey

JW. 爬虫能否在无法登录的情况下访问记录？ - kafuchau

不，网络爬虫无法访问您网站的受保护部分。 - Benry

如果“保护”依赖于JavaScript，那么网络爬虫（以及任何已关闭JavaScript的人）都可以访问它。 - some

@PeterBailey HTTP规范的哪一部分涉及到这个问题？你能加一个链接或者什么东西吗？我对进一步了解这个很感兴趣。 - A.R.

Answer 6

首先，delete 是 javascript 中的 保留字，我很惊讶这个代码居然可以执行（当我在 Firefox 测试时，会出现语法错误）。

其次，你的 HTML 看起来有点奇怪 - 你关闭开放的锚点标签时为什么要用 /> 而不是简单地使用 >？

- BaileyP

---

哇，脑抽了。没想到要检查“delete”这个关键字。当其他很多语言都将其保留时，这有点“傻瓜”。：P - kafuchau

XHTML使用/>来关闭空标签...这意味着在原始帖子的代码中，a标签被关闭了两次!! - some

Answer 7

<img src="images/delete.png" onclick="return confirm_delete('Are you sure?')"> 



<script type="text/javascript">
function confirm_delete(question) {

  if(confirm(question)){

     alert("Action to delete");

  }else{
    return false;  
  }

}
</script>

- esdebon

Answer 8

如果您想在onclick标签中使用小的内联命令，您可以使用以下代码： <button id="" class="delete" onclick="javascript:if(confirm('您确定要删除此条目吗？')){jQuery(this).parent().remove(); return false;}" type="button"> 删除 </button> 这段代码将在点击按钮时弹出确认对话框，如果用户选择“确定”，则将删除该条目。

- aki

Answer 9

试试这个：

OnClientClick='return (confirm("Are you sure you want to delete this comment?"));'

- user3319721

Answer 10

问题在于您从delete（）函数返回true，这告诉浏览器即使用户单击取消也要跟随该链接。 要解决此问题，如果用户单击取消，则需要从函数返回false。 以下是更新后的代码：

<script type="text/javascript">

function delete() {
    var confirmation = confirm('Delete entry?');
    if (confirmation) {
        return true;
    } else {
        return false;
    }
}

</script>

- Muhammad Rizwan