关于event.preventDefault()的用法

最新推荐文章于 2024-08-09 18:14:43 发布
最新推荐文章于 2024-08-09 18:14:43 发布
阅读量6.5k 收藏 9
点赞数 6
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuyangsuccessful/article/details/128630035
版权
文章探讨了在使用ES6的解构赋值处理表单数据时遇到的问题，即表单提交后无法获取输入内容。问题出在未阻止表单的默认提交行为。通过`event.preventDefault()`可以阻止这一行为，但在IE中需要使用`window.event.returnValue=false`进行兼容。此外，文章还介绍了对象解构赋值的简化语法。
摘要由CSDN通过智能技术生成

  本来是研究ES6的对象的解构赋值的，自己突发奇想，将表单页面的数据提交到后端对象中的，用纯原生的方式编写代码，结果运行代码没有报错，怎么就获取不到表单输入框输入的内容，百思不得其解。先展示错误代码

   当运行上述代码的时候，打开浏览器，点击提交按钮，控制台结果一闪而过，最后询问大佬，大佬告知我说，from表单是默认提交的，控制台打印肯定不显示的，需要做的是阻止默认事件就ok了，然后给我指出使用event.preventDefault()。

   event.preventDefault()是何方法宝？那么厉害呢？以前学艺不精忘记了，这里在复习一遍。

event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。

其实就是用来取消时间的默认动作。

注意

1、如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

2、此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。

修改后的代码就是需要添加event.preventDefault()，代码如下所示：

 在上面代码中还有一个知识点就是ES6的对象解构赋值，在一个对象中，当属性（key）与属性值(前面定义的变量)一样的时候，是可以省略的，可以只写一个（key）属性。

多次重学前端的小菜鸟
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？如何知道是否在元素中使用了event.preventDefault()方法？
liuhao9999的博客
03-22 996
event.preventDefault()方法可防止元素的默认行为。如果在表单元素中使用，它将阻止其提交。如果在锚元素中使用，它将阻止其导航。如果在上下文菜单中使用，它将阻止其显示或显示。event.stopPropagation()方法用于阻止捕获和冒泡阶段中当前事件的进一步传播。 我们可以在事件对象中使用event.defaultPrevented属性。它返回一个布尔值用来表明是否在特定元素中调用了event.preventDefault()。 ...
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
在大部分现代浏览器中，我们可以使用`event.preventDefault()`方法来实现这一功能，然而，对于古老的Internet Explorer（IE）浏览器，情况就有所不同了。本文将详细讲解在IE浏览器中如何阻止右键点击的默认行为以及`...
event.preventDefault() 与返回 false
kalman2019的博客
12-21 1733
当我想在某个事件被触发后阻止其他事件处理程序执行时，我可以使用两种技术之一。我将在示例中使用 jQuery，但这也适用于纯 JS：1. event.preventDefault()2.返回假这两种停止事件传播的方法之间有什么显着区别吗？对我来说，return false; 比执行方法更简单、更短并且可能更不容易出错。使用该方法，您必须记住正确的大小写、括号等。另外，我必须在回调中定义第一个参数才能调用该方法。也许，有一些原因我应该避免这样做并使用 preventDefault 代替？有什么更好的
js阻止事件的三种方式
2302_80798583的博客
06-20 464
阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type=“submit” 的 input 标签提交表单，你在 onclick 事件处理中调用 event.preventDefault()方法， 那么在点击 submit 后就不会自动提交表单了。但是并不阻止事件冒泡。之后的所有相关的触发事件和动作都不会被执行。阻止事件继续传播，事件冒泡和默认行为都被阻止。立即停止事件在 DOM 层次中的传播，即阻止事件冒泡。但是，并不阻止默认行为。
preventDefault() 方法
07-25 1686
 定义和用法取消事件的默认动作。语法event.preventDefault()说明该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动
event.preventDefault方法的使用
当富网络
03-12 6959
本文导读：event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 定义和用法 取消事件的默认动作。   语法 event.preventDefault()   说明 该方法将通知
event.preventDefault()
Democreen
03-11 6263
<br />preventDefault() 方法定义和用法<br />取消事件的默认动作。<br /> 语法event.preventDefault()说明<br />该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。<br />例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，<br />通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，<br />那么就没有默认动作，或者不
flex中event.preventDefault()方法取消事件的默认行为
10-27
在Flex编程中，`event.preventDefault()`方法是一个非常关键的事件处理机制，用于阻止事件的默认行为。这个方法常被用于监听和响应用户交互时，控制应用程序的行为。在给定的例子中，我们看到它被应用于一个名为`...
JQuery事件e参数的方法preventDefault()取消默认行为
10-26
在较旧的浏览器版本中可能无法使用此方法，或者其用法有所不同。为了确保跨浏览器的兼容性，建议总是检查浏览器对`e.preventDefault()`方法的支持情况，或者使用兼容性替代方案，比如`return false`语句，它同时阻止...
js事件源window.event.srcElement兼容性写法(详解)
10-21
也就是说，不能直接通过window.event.srcElement来获取事件源，而应该使用事件对象的srcElement属性，或者在火狐中使用target属性。因此，当我们想编写一份兼容所有主流浏览器的代码时，就需要采用特定的兼容性写法...
利用jQuery的$.event.fix函数统一浏览器event事件处理
10-29
具体使用方法如下： 首先，需要在网页的标签中引用jQuery框架库文件。然后，定义一个事件处理函数，并在函数调用时传入event参数。在事件处理函数内部，首先使用$.event.fix对传入的event参数进行兼容性处理。处理后...
event.preventDefault()；
最新发布
xjdkxnhcoskxbco的博客
08-09 153
有些事件（如 beforeunload 事件）具有特殊的行为，当你使用 event.preventDefault() 时，浏览器可能会显示一个提示框。如果你有一个表单，而你不希望在点击提交按钮时浏览器自动提交表单，可以使用 event.preventDefault() 来阻止默认提交行为。如果你想阻止右键点击时出现默认的上下文菜单，可以使用 event.preventDefault()。当你希望点击一个链接时，阻止其跳转到新页面，可以使用 event.preventDefault()。
event.preventDefault()作用
wujian_csdn_csdn的博客
09-29 3643
jQuery 事件 - preventDefault() 方法 防止链接打开 URL： $(“a”).click(function(event){ event.preventDefault(); }); 定义和用法： preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 语法 event.preventDefault() 参数 描述 event 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 ...
阻止默认事件event.preventDefault();
qq_40712151的博客
04-26 3221
event.preventDefault(); 阻止浏览器默认事件。什么是默认事件，例如浏览器默认右键菜单、a标签默认连接跳转…
Js中event.preventDefault()方法
shanxiaxuesheng的博客
10-30 528
当时我想，于是搜了一下各种资料，发现event.preventDefault()是用来阻止元素发生默认的行为的一种方法，比如阻止默认表单提交，阻止跳转到默认的url。以上就是有关event.preventDefault()方法的总结啦，希望能给你带来一点帮助。这个方法是我在使用原生js编写“表单提交”部分的代码时，发现并学习到的方法。参数事必需的，且参数来自事件绑定函数。而我想要的就是后者的效果。该方法不支持IE浏览器，
event.preventDefault()方法
小景的博客
08-12 8600
今天看到这个方法，因为之前没有接触过，就随手记录一下，希望以后可以用到。 event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 其实就是用来取消时间的默认动作。 注意 1、如果 Event 对象的 c
preventDefault()
zozo_的博客
10-11 849
preventDefault()是一个 JavaScript 方法，常用于阻止事件的默认行为。
event.preventdefault
06-28
### 回答1： event.preventDefault是JavaScript中的一个方法，用于阻止事件的默认行为。例如，当用户点击一个链接时，浏览器会默认打开链接所指向的页面。如果你想要阻止这个默认行为，可以使用event.preventDefault方法。这个方法可以应用于各种事件，如点击、提交表单、按下键盘等等。 ### 回答2： event.preventDefault()是JavaScript中常用的方法之一，它用来阻止浏览器默认行为的发生。也就是说，当浏览器默认行为与代码所需要的行为冲突时，可以使用该方法来取消默认行为。例如，当用户在表单中填写完信息后，按下“提交”按钮，如果没有使用event.preventDefault()方法，浏览器将会刷新页面，从而导致表单信息丢失。而使用event.preventDefault()方法就可以防止页面刷新，以便将表单信息传回后台进行处理。 除了表单提交之外，event.preventDefault()方法还可以用于以下情况： 1. A标签的默认跳转事件：例如，当用户点击一个链接时，浏览器会默认跳转到该链接所在的目标页面。而使用event.preventDefault()方法可以取消默认跳转事件，从而在同一页中打开链接。 2. 鼠标右键默认菜单：当用户在页面中右键单击时，浏览器会默认显示菜单。而使用event.preventDefault()方法可以自定义右键菜单，例如，创建一个自定义菜单，并在右键单击时显示该自定义菜单。 3. 表单输入框中的默认选择事件：例如，当用户在下拉框中选择一个选项时，浏览器会默认选择该选项。而使用event.preventDefault()方法可以取消默认选择事件，以便用户自主选择。 总之，event.preventDefault()方法可以使用在任何需要用代码来阻止浏览器默认行为的情况中。它是一个非常实用的方法，在JavaScript开发中经常会用到。 ### 回答3： event.preventDefault()是Javascript中的一个方法，用于防止一个元素的默认行为。默认情况下，当用户与一个元素交互时，例如点击链接或提交表单，浏览器会执行该元素的默认行为。event.preventDefault()可以阻止浏览器执行该默认行为，从而增强了页面的交互性。 例如，当一个链接元素被点击时，网页通常会跳转到链接地址所指定的页面。但是如果我们想在用户点击链接时做一些其他的操作，就可以使用event.preventDefault()来阻止链接的默认行为，而不是直接跳转到链接地址。 另一个常见的例子是，当用户在输入框中输入内容并按下“回车”键时，表单通常会被提交并刷新页面。但是如果我们想在表单提交之前先验证用户的输入是否合法，就可以使用event.preventDefault()来阻止表单的默认行为，并在通过JavaScript代码处理表单提交功能。 综上所述，event.preventDefault()是Javascript中非常有用的方法，可以帮助我们实现更加灵活和自主的网页交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值