js 停止事件冒泡 阻止浏览器的默认行为
时间:2022-05-08
本文章向大家介绍js 停止事件冒泡 阻止浏览器的默认行为,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。
浏览器默认行为:
在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu.
a标签
1..停止事件冒泡
JavaScript代码
1 //如果提供了事件对象,则这是一个非IE浏览器
2 if ( e && e.stopPropagation )
3 //因此它支持W3C的stopPropagation()方法
4 e.stopPropagation();
5 else
6 //否则,我们需要使用IE的方式来取消事件冒泡
7 window.event.cancelBubble = true;
8 return false;
2.阻止浏览器的默认行为
JavaScript代码
1 element.onclick = function(event) {
2
3 event = event || window.event;
4
5 //如果提供了事件对象,则这是一个非IE浏览器
6
7 if (event&& event.preventDefault) {
8
9 //阻止默认浏览器动作(W3C)
10
11 event.preventDefault();
12
13 } else {
14
15 //IE中阻止函数器默认动作的方式
16
17 window.event.returnValue = false;
18
19 }
20
21 //event.preventDefault?event.preventDefault():(event.returnValue = false);
22
23 }
或者直接返回false:
element.onclick = function(event) {
//...
return false;
}
但是在使用return false时必须注意: 1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止。 2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。 注意: 有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,如:在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变,这个动作是发生在focus事件之前的,是focus事件处理程序中无法取消的。
摘自:http://blog.csdn.net/jquery_qq/article/details/51568816
http://www.cnblogs.com/yuzhongwusan/archive/2008/12/27/1363417.html
- [SQLServer大对象]——FileTable从文件系统迁移文件
- [机器学习]-[数据预处理]-中心化 缩放 KNN(二)
- [数据清洗]-看上去一样的数字
- [数据清洗]- Pandas 清洗“脏”数据(三)
- [数据清洗]- Pandas 清洗“脏”数据(二)
- [数据清洗]-Pandas 清洗“脏”数据(一)
- [数据清洗]-混乱的邮编数据
- 10行代码,Python实现爬取淘宝/天猫评论
- 4.请求安全-- 结合使用的安全优势总结
- TensorFlow强化学习入门(4)——深度Q网络(DQN)及其扩展
- 3.请求安全-- 如何验证请求的唯一性
- 2.请求安全-- MD5的必要性以及实际应用场景
- 1.请求安全-- 一个简单的 单设备登录 单点登录
- phalapi-进阶篇3(自动加载和拦截器)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 通吃岛屿问题
- 堂妹问我:Dubbo的服务暴露过程
- LeetCode 657. 机器人能否返回原点
- ! [rejected] master -> master (fetch first)
- Mybatis源码学习(二)Mapper动态代理
- Mybatis源码学习(三)executor
- Mybatis源码学习(四)拦截器与插件原理
- SpringBoot如何使用注解装配Bean
- Spring Boot 如何快速实现定时任务
- Django 实现文件上传下载API
- 【原创】Spring Boot 如何手写stater
- 【原创】Spring Boot 过滤器、监听器、拦截器的使用
- 关于useState的一切
- 关于useEffect的一切
- (25)Bash数值运算与运算符