【JS基础】e.preventDefault() 阻止默认操作
阻止默认操作
默认操作 具体指的是什么呢?看如下实例:
- 把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。
- 当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。
在这种情况下,处理方法有:
1.w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false
preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。
既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。
什么元素有默认行为呢?如链接<a>
,提交按钮<input type=”submit”>
等。
当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
<a href="http://www.baidu.com" id="testA" >baidu.com</a>var a = document.getElementById("testA");
a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue = false;//IE//注意:这个地方是无法用return false代替的 //return false只能取消元素}
}
2. return false
javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。
//原生js,只会阻止默认行为,不会停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){return false;//当然 也阻止了事件本身
};
//既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。1234567
//jQuery,既阻止默认行为又停止冒泡
$("#testA").on('click',function(){return false;//当然 也阻止了事件本身
});
总结方法
当需要阻止默认行为时,可以使用:
function stopDefault( e ) { if ( e && e.preventDefault ){e.preventDefault(); //阻止默认浏览器动作(W3C) }else {window.event.returnValue = false; //IE中阻止函数器默认动作的方式 }return false;
}
事件注意点
1、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
2、event对象只在事件发生的过程中才有效。
【JS基础】e.preventDefault() 阻止默认操作相关推荐
- js事件-阻止默认操作
默认操作 具体指的是什么呢?看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面. (2 ...
- Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听 参数: ...
- js初识、JS基础交互、JavaScript 元素操作
js初识 js外链引入 外链引入.js 通过script标签的src属性引入外部js文件在外部新建一个后缀名为js的文件注意:用于引入外部js文件的script标签,就不要再写其他的js代码,不会执行 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
- Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
- JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
- jQuery之防止【冒泡事件】,阻止默认行为 【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面 两者都可以用 return ...
- Js阻止事件冒泡与阻止默认事件
1.event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行.不让事件向document上蔓延,但是默认 ...
- 前端面试题目汇总摘录(JS 基础篇)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
最新文章
- tesseract3.01的训练和使用
- 窗口之间传递消息的一个方法
- 再见了Dubbo!正式拥抱下一个神级Java开发框架!
- hdu 2018多校8
- Ctrl+F5不能使用的问题
- tty,串口,控制台与驱动程序
- mysql进阶知识_Mysql面试知识点总结(进阶篇)
- subline Text3 插件安装
- MySQL高可用方案-PXC环境部署记录
- win10 + bazel-0.20.0 + tensorflow-1.13.1 编译tensorflow GPU版本的C++库
- iOS,QRCord(矩阵二维码)
- 蓝桥杯2019c语言b组试题,2020年7月B组C++蓝桥杯真题试水
- 为什么计算机无法打开扫描机,为什么打印机无法扫描 打印机无法扫描是什么原因 - 云骑士一键重装系统...
- 微信小程序——云开发|计费方式调整大家怎么看?
- 健康知识竞答线上活动方案——微信答题小程序实现
- 基于低代码平台(Low Code Platform)开发中小企业信息化项目
- 深入理解机器学习——集成学习(二):提升法Boosting与Adaboost算法
- [FreeCodeCamp笔记] Python 数据结构和算法1 二分搜索 Binary Search
- android dalvik vm oo
- OpenCV-Python ——图像加文字
热门文章
- C语言如何打开shx文件,shx文件怎么打开?Win7打开shx文件的操作方法
- 前端开箱即用的中后台管理模版,建议收藏
- 计算机专业课程思政优秀案例,【转载】专业课程思政教学案例分享之《专业导论(计算机科学与技术)》...
- 目标检测中的precision,recall,AP,mAP计算详解
- HashMap底层——解决Hash冲突(链地址法)
- 国外邮箱安全性排名,国外邮箱哪个安全好用?
- 2021 AI年度报告-stateof.ai出品【1】
- 旧貌换新颜 | 凯云科技整装待发,迎风飞扬
- 【python】用ChatGPT使用爬虫
- what is grid ?