专栏首页前端小叙js 停止事件冒泡 阻止浏览器的默认行为

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue给input file绑定函数获取当前上传的对象

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tirgger...

    蓓蕾心晴
  • 设置滚动条样式

    /*滚动条样式*/ ::-webkit-scrollbar-track-piece { background-color: #FFF } ::-webki...

    蓓蕾心晴
  • vue报错集锦

    1、vue报错: 没安装 less-loader css-loader style-loader        可能的很大原因:没安装less 2、vuex报错...

    蓓蕾心晴
  • JQ事件和事件对象

      //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

    用户3159471
  • JVM快速调优命令汇总

    注意:jmap 在执行转存储jmap -dump时,JVM是暂停服务的,所以对线上的运行会产生影响

    斯武丶风晴
  • php实现redis消息发布订阅

    Pub/Sub功能(means Publish, Subscribe)即发布及订阅功能

    叫我可儿呀
  • DMN:大脑的默认网络

    这篇文章综述由世界著名的脑成像专家Marcus E.Raichle教授撰写,Raichle 教授来自圣路易斯华盛顿大学(Washington Univers...

    用户1279583
  • java 源代码里的failure mode

    fail-fast: java对于使用iterator迭代器来遍历集合元素时, 对同时使用集合的add/remove修改集合元素, 这样由于集合用自身的方法修改...

    CoffeeLand
  • 【机器学习知识体系】- 机器学习问题的一般流程

    今天开始会陆续将之前的文章做一下梳理,整理出一个完整的知识体系,有需要的伙伴们可以更方便地查找自己需要的知识点。

    杨熹
  • 人脸专集2 | 人脸关键点检测汇总

    今天应该是“计算机视觉战队”人脸专集的第2期,我们主要涉及目标检测与识别,主要在人脸领域做更多的详解。

    计算机视觉研究院

扫码关注云+社区

领取腾讯云代金券