e.preventDefault 防止点击事件的默认行为

Question

我有以下代码，只是为了测试e.preventDefault()如何工作。 我认为它会阻止点击事件的发生。

     $(document).ready(function( )
     {

       $("button").click(function(e)
       {

         e.preventDefault();  

          alert('button clicked');

       });

      });

我有一个按钮。e.preventDefault()的作用是什么？从我读到的内容来看，它会阻止这个动作，也就是点击。

需要注意的是，在上面的例子中，警告消息仍然显示。e.preventDefault()如何处理按钮点击。如果它是一个超链接，它将防止超链接跳转到目标。

- Nate Pet

Answer 1

preventDefault的作用是阻止默认的浏览器行为。因此，如果您编写如下代码：

$("a").click(function(e){e.preventDefault();})

点击链接不会有任何反应。或者点击提交按钮 - 表单不会被提交。

- Viktor S.

---

然而，需要注意的是，为了防止表单被提交，最好是阻止表单对象的“submit”事件的默认操作，而不是“click”事件的提交按钮的默认操作。请记住，表单可以（并且应该能够）使用键盘。 - PointedEars

@PointedEars，你能否解释一下这不起作用的情况？我只是想弄清楚这个问题。以前从未考虑过这一点。我认为当有多个按钮时，如果事件不在“按Enter键”单击的那个按钮上，则可能会出现问题，但如果只有一个按钮-在提交按钮上单击事件即使我在输入字段中按Enter或在聚焦按钮时与空格一起按下也会被调用。 - Viktor S.

你说话的口气好像你只在几个图形化Web浏览器中测试过这个，现在就将那些知识应用到所有UA上。那是很危险的。如果你想要测试系列的结果，我现在还不能提供给你。对我来说，足够说明良好的应用程序设计具有单点故障。你想要防止表单提交，无论你的表单结构如何：无论它是否有提交按钮，一个或两个，无论默认提交按钮是第一个还是第二个，哪个有焦点；无论是通过按钮点击、键盘快捷键还是其他方式提交。 - PointedEars

Answer 2

它防止的是DOM对象接收“click”事件。因此，如果您的按钮要提交表单，现在它不会提交。之后的alert()将被执行，因为您正在说：“嘿！停止点击，然后执行这个！”

更多阅读

• http://www.quirksmode.org/js/introevents.html
• https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault

- romo

---

错误。DOM对象确实接收到了click事件，这就是为什么它的click事件监听器首先被处理程序触发的原因。preventDefault()会阻止对象上事件的默认操作。 - PointedEars

Answer 3

它无法阻止点击事件的发生，因为您设置的是在事件触发后执行的事件处理程序。

- Jon

Answer 4

$.preventDefault();会阻止“默认”操作的发生。例如，如果您采取一个已经分配了href的锚链接，然后将preventDefault();添加到该锚上，它将不再链接。

- voodooGQ

---

错误。没有“'默认'事件”。通常每个对象上的每个事件都有一个默认操作，在这种情况下，是a元素的click事件的导航操作（由其href属性指定），被preventDefault()阻止。 - PointedEars

很抱歉，您的回答需要完全重写后我才能负责任地发布我的踩票。 - PointedEars

为什么？你是说我写的还是不正确的吗？怎么了？我像其他人一样在努力学习，如果你不想点赞那没关系，但是一个具体的理由会很受欢迎。我在你的解释中没有看到任何不同之处，除了与默认操作相关的“通常”一词。如果没有默认操作，那么就不会有任何防止措施。答案仍然有效。 - voodooGQ

你可以相信我或不相信，但我知道自己在说什么。在回答被接受之前，它需要进行严肃的重写：没有 $.preventDefault()；它是 event 对象的一个方法。需要删除 "'Default'"周围的引号并将"default"小写化。说“锚点不会链接”是错误的；相反，当链接被激活并启用脚本时，导航将不会发生。考虑到其他更好的答案，最好只是删除这个答案。错误或误导性的答案对社区的伤害比不回答更大。 - PointedEars

所以除了$.preventDefault()的问题之外，你认为其他都是基于语法的？那么你认为需要逐步分析所有可能的情况吗？当然，如果脚本关闭，答案就不起作用了。当然，如果用户没有点击链接本身，它也不会做任何事情。但是在每个答案中列出这些内容；你还不如让我告诉用户如何打字。奇怪的是，你投票支持的答案没有这种程度的审查。 - voodooGQ

Answer 5

你需要记住，如果没有添加自己的Click回调函数，浏览器仍会触发一个事件 - 例如对于“a”标签，这将是加载href属性中的URL，对于提交按钮，它将是在表单“Action”属性中发布/获取到URL - 在这两种情况下，e.preventDefault()将阻止这种情况发生。

- Rob

---

[a元素] (http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.1) ，不是 "'a'标签"。标签本身无任何作用，甚至在文档树中都没有表示。通过元素对象在文档树中表示元素。 - PointedEars

@PointedEars - 感谢您指出这一点。然而，我认为，在我的回答的背景下，“标签”的含义很可能足以表明该语句的意图，而不会引起歧义。我经常联系雅虎网站开发人员，请求他们像“请将xyz类添加到'tags'中”这样的请求，他们似乎没有任何理解上的问题。但再次感谢您花费“时间”指出这一点。 - Rob

既然你不得不使用讽刺：无能以小包装。 - PointedEars