在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

浏览器默认行为:

在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

转载于:https://www.cnblogs.com/beileixinqing/p/6503688.html

js 停止事件冒泡 阻止浏览器的默认行为相关推荐

  1. javascript阻止事件冒泡和浏览器的默认行为

    http://www.aspxhome.com/javascript/skills/200712/262128.htm 就是说用Div框住flash  Div的鼠标事件不传递给Body 文中说的方法记 ...

  2. js取消气泡事件、阻止浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 取消tr里面子元素响应tr定义的事件,在tr子元素里面禁止气泡事件就可以,子元素事件中加入window.event.cancelBubble=true 即 ...

  3. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...

  4. javascript 阻止冒泡和浏览器的默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题. 1.阻止事件冒泡 ...

  5. 彻底弄懂JS的事件冒泡和事件捕获

    原文地址为: 彻底弄懂JS的事件冒泡和事件捕获 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...

  6. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  7. 如何阻止浏览器的默认行为?

    如何阻止浏览器的默认行为? 什么是默认行为? 默认行为,就是不用我们注册,其本身就存在的事情 比如我们点击鼠标右键的时候,会自动弹出一个菜单 比如我们点击 a 标签的时候,我们不需要注册点击事件,他自 ...

  8. js /jquery停止事件冒泡和阻止浏览器默认事件

    var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...

  9. JavaScript事件——event对象事件冒泡 阻止默认行为事件捕获

    event对象 用来获取事物的详细信息:鼠标位置.键盘按键 e.clientX 鼠标距离元素所在的X轴(左边)位置 e.clientY 鼠标距离元素所在的Y轴(顶部)位置 (左上角为0,0点) 获取e ...

最新文章

  1. Uva 11922 Splay
  2. java中怎样创建多个对象,java中StringBuilder.appent方法创建几个对象
  3. 中国邮政编码.html,全国邮政编码一览表.doc
  4. idea webapp目录404问题,war包方式运行
  5. [导入]关于OllyDbg 2.0的消息..
  6. 170905-MyBatis中的关系映射
  7. html元素中的click属性,从HTML中的onClick属性调用jQuery方法
  8. 服务器端配置nodejs环境(使用pm2进程管理运行)
  9. Android安全补丁程序下载,2017年一月win7安全补丁更新包官方下载-2017Win7安全更新补丁包64位下载-西西软件下载...
  10. 全国软件专业人才开发与设计赛题之中等题“五位数黑洞”
  11. 增值税相关软件基本常识
  12. JavaScript登录界面制作
  13. 各种串口助手工具分享
  14. Blender建模:如何改变窗口布局?
  15. PHP 运行后出现The requested URL was not found on this server.
  16. CAD软件中怎么合并表格?CAD表格合并技巧
  17. 离散数学 传递闭包 Warshall算法
  18. Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)
  19. 用Python分析了30000+《独行月球》影评数据,看看观众们怎么说~
  20. 墨客FileStorm生态与四块科技生态联合发布会

热门文章

  1. python在线翻译代码_Python 20行简单实现有道在线翻译的详解
  2. 微分算子为什么也是空间滤波器
  3. Python的浅拷贝和深拷贝
  4. 【AI不惑境】计算机视觉中注意力机制原理及其模型发展和应用
  5. 【模型解读】浅析RNN到LSTM
  6. 【技术综述】深度学习中的数据增强(下)
  7. 速卖通运营之如何提升商品动销率
  8. 中国石化行业节能减排行业发展动态与运营前景规划展望报告2022年
  9. 中国功率半导体产业销售规模与投资策略研究报告2022版
  10. 全球及中国服务器电源行业市场深度策略分析及投资规划咨询建议报告2022-2028年版