代码之家 › 专栏 › 技术社区 › kafuchau

简单的JavaScript问题:单击确认不会阻止默认操作

html javascript

kafuchau · 技术社区 · 17 年前

我正在制作一个简单的删除链接,其中包含一个点击事件,该事件会弹出一个确认对话框。我想确认用户是否要删除条目。然而,当在对话框中单击“取消”时,默认操作(即href链接)似乎仍在进行,因此条目仍会被删除。不知道我在这里做错了什么。..任何意见都将不胜感激。

EDIT:实际上,按照现在的代码方式,页面甚至不进行函数调用。..所以,根本不会出现对话。我确实有点击代码:

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>

11 回复 | 直到 17 年前

143

Ravi Ram 10 年前

你的代码中有一个拼写错误(标签一过早关闭)。您可以使用:

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

注意 返回(确认) :内部evens中脚本返回的值决定是否运行默认浏览器操作;如果你需要运行一大块代码,当然可以调用另一个函数:

<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 Events .

Andrew 10 年前

嗯,我以前也遇到过同样的问题,通过添加“ 回 “在确认之前:

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

我希望这对你有帮助。。

祝你好运

Stepan Mazurov 17 年前

我用这个,效果很好。无需任何功能,只需与您的链接内联即可

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

Gytis 13 年前

我也有类似的问题(点击按钮,但在取消点击后,它仍然会删除我的对象),所以这样做,希望将来能帮助到别人:

 $('.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;
});

siukurnin 17 年前

在我看来,使用简单的链接进行删除记录等操作是危险的:如果爬虫试图为您的页面建立索引怎么办? 它将忽略任何javascript并跟踪每个链接,这可能不是一件好事。

您最好使用method=“POST”的表单。

然后你会有一个事件“OnSubmit”来做你想做的事情。..

Peter Bailey 17 年前

首先, 删去是a reserved word 在javascript中,我很惊讶它甚至可以为你执行(当我在Firefox中测试它时,我得到了一个语法错误)

其次,你的HTML看起来很奇怪——你用什么来关闭开头的锚点标签 /> 而不是仅仅 > ?

esdebon 11 年前

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

aki 11 年前

如果你想在onclick标签中使用小的内联命令,你可以使用这样的东西。

<button id="" class="delete" onclick="javascript:if(confirm('Are you sure you want to delete this entry?')){jQuery(this).parent().remove(); return false;}" type="button"> Delete </button>

kboul 6 年前

试试这个:

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

-1

Community Mohan Dere 8 年前

问题是,您从delete()函数返回true,该函数告诉浏览器即使用户单击“取消”也要遵循该链接。为了解决这个问题,如果用户单击“取消”,您需要从函数中返回false。以下是更新后的代码:

<script type="text/javascript">

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

</script>