event.preventDefault()

最新推荐文章于 2024-05-28 17:29:02 发布
最新推荐文章于 2024-05-28 17:29:02 发布
阅读量2.5k 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： event preventDefault
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niexia_/article/details/79457610
版权

event.preventDefault()

如果事件可取消，则取消该事件，而不停止事件的进一步传播。

  • 比如下面的实例，做一个校验，输入不满足的则不会写入。
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
</head>
<body>
<p>请输入一些字母,只允许小写字母.</p>
<form>
    <input type="text" id="my-textbox"/>
</form>
<script type="text/javascript">
function checkName(evt) {
    debugger;
    var spanEl = document.querySelector('form span');
    if(spanEl){
        spanEl.parentNode.removeChild(spanEl);
    }
    var charCode = evt.charCode;
      if (charCode != 0) {
        if (charCode < 97 || charCode > 122) {
            var form = document.querySelector('form');
            evt.preventDefault();//event.preventDefault()
            let warnEl = document.createElement('span');
            warnEl.innerText = "只能输入小写字母";
            warnEl.style.color = 'red';
            form.appendChild(warnEl);
        }
      }
}
document.getElementById('my-textbox').addEventListener(
    'keypress', checkName, false
 );
console.log(document.getElementById('my-textbox'));
</script>
</body>
</html>

这里写图片描述
不满足的取消事件，所以不满足条件的输入不会写入到input里面

github@niexia
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
在大部分现代浏览器中，我们可以使用`event.preventDefault()`方法来实现这一功能，然而，对于古老的Internet Explorer（IE）浏览器，情况就有所不同了。本文将详细讲解在IE浏览器中如何阻止右键点击的默认行为以及`...
flex中event.preventDefault()方法取消事件的默认行为
10-27
在Flex编程中，`event.preventDefault()`方法是一个非常关键的事件处理机制，用于阻止事件的默认行为。这个方法常被用于监听和响应用户交互时，控制应用程序的行为。在给定的例子中，我们看到它被应用于一个名为`...
preventDefault()方法和stopPropagation()方法的使用
aa574202228的专栏
07-07 1180
1、preventDefault()方法        preventDefault()方法是用来阻止浏览器默认事件。                                                                                                                                
JS、Vue、React阻止事件冒泡及阻止默认事件
莫幽悠
03-04 2133
JS阻止事件冒泡解决方案： 1、event.preventDefault Event接口的preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation()或stopImmediatePropagation()，才停止传播。 示例： <!DOCTYPE html> <html> <head> <style> ...
event.preventDefault()使用指南
最新发布
szial的专栏
05-28 1183
是 JavaScript 中用于阻止默认事件行为的方法。具体而言，它在处理 HTML 元素（如链接和表单）的事件时非常有用。下面是详细的解释和示例，说明它的作用和使用场景。
event.preventDefault方法的使用
当富网络
03-12 6948
本文导读：event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 定义和用法 取消事件的默认动作。   语法 event.preventDefault()   说明 该方法将通知
event.preventDefault() 与返回 false
kalman2019的博客
12-21 1711
当我想在某个事件被触发后阻止其他事件处理程序执行时，我可以使用两种技术之一。我将在示例中使用 jQuery，但这也适用于纯 JS：1. event.preventDefault()2.返回假这两种停止事件传播的方法之间有什么显着区别吗？对我来说，return false; 比执行方法更简单、更短并且可能更不容易出错。使用该方法，您必须记住正确的大小写、括号等。另外，我必须在回调中定义第一个参数才能调用该方法。也许，有一些原因我应该避免这样做并使用 preventDefault 代替？有什么更好的
关于event.preventDefault()的用法
fuyangsuccessful的博客
01-10 6465
event.preventDefault() ；ES6中的对象解构赋值。
wrap-prevent-default:包装事件处理程序，以便在可用时为您提供e.preventDefault（）。 （即直接调用也可以）
05-02
var handler = prevDflt ( function ( event ) { console . log ( "I've been clicked!" ) ; } ) ; //attach it to the onclick handler somehow... (library and framework agnostic) // i.e. <a>... //when it's ...
js事件源window.event.srcElement兼容性写法(详解)
11-28
(typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; } } ``` 在实际的事件处理函数中，你可以这样使用`getEvent()`： ...
解决vue的touchStart事件及click事件冲突问题
11-20
在`touchStart`事件的处理函数中调用`event.preventDefault()`可以阻止默认的行为，即防止`click`事件的延迟触发。例如，在Vue.js中，我们可以在模板中使用事件修饰符`@touchstart.stop.prevent`来简化代码。这样，...
js中如何实现阻止默认行为及实现自定义右键菜单
YY的博客
10-25 2845
js中如何实现阻止默认行为及实现自定义右键菜单
event.preventDefault()方法
小景的博客
08-12 8576
今天看到这个方法，因为之前没有接触过，就随手记录一下，希望以后可以用到。 event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 其实就是用来取消时间的默认动作。 注意 1、如果 Event 对象的 c
preventDefault() 方法使用
Delion
12-29 7145
preventDefault() 方法 Event 对象 定义和用法 取消事件的默认动作。 语法 event.preventDefault() 说明 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注
浅谈js中事件preventDefault()和addEventListener()
Shine的博客
05-15 6108
js的事件相关函数使用preventDefault()和addEventListener()
事件默认行为
qq_45783949的博客
07-20 249
浏览器的默认行为：JavaScript事件本身具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。 阻止默认行为的方式：event.preventDefault(); event.returnValue = false; return false; 事件默认行为一、现象二、阻止默认行为的发生三种方法1、return false;2、evt.returnValue = false;3、evt.preventDefault(); 一、现象 先上代码 <!DOCTYPE.
阻止事件
adai19850204的博客
08-03 140
一。取消浏览器对事件的默认行为（响应）（比如标签的跳转等）并停止事件的继续传播。 function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); ...
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、付费专栏及课程。

余额充值