摘要

很多同学对阻止事件冒泡和阻止事件默认行为容易混淆，项目中因为一些原因也需要阻止浏览器的一些默认行为，这里就简单总结一下。

阻止事件冒泡

什么是事件冒泡这里就不再赘述了，网上的文章一大把，这里就简述一下如何阻止事件冒泡，阻止事件冒泡在使用浏览器原生API的情况下，是需要分情况考虑的，毕竟有个个性的浏览器IE，这里分为IE实现和W3C标准实现。

在W3C标准实现中，我们阻止事件冒泡可以很容易使用标准API

基本语法：

event.stopPropagation();

IE实现下（这里主要指IE低版本IE9以下版本，因为IE9也实现了W3C标准）

基本语法：

event.cancelBubble = bool;

当然IE标准并不是只有IE支持，其实很多浏览器都实现了cancelBubble支持，但是后来虽然浏览器没有取消对cancelBubble属性的支持，设置了之后也会无效，所以建议的兼容语法是：

function eventCallback(e){

    e = e||window.event;

    if(e.stopPropagation){ //通过浏览器能力进行兼容性检测

        e.stopPropagation();

    }else if(e.cancelBubble){

        e.cancelBubble = true;

    }

}

当然说到阻止事件冒泡这个问题，也要简单提一下 event.stopPropagation 和event.stopImmediatePropagation的异同点：

  • 相同点是两者都能阻止标准事件注册方式注册的事件 （addEventListener,IE是attachEvent）向父级节点继续冒泡
  • 不同点从名字上可以看出，Immediate立即的意思，event.stopImmediatePropagation 不止能阻止往父级节点冒泡，还能阻止当前节点其它事件的继续执行（比如往一个元素上注册了多个事件，那么在第一个事件执行的时候，通过调用event.stopImmediatePropagation，会阻止其它事件的执行）

上面代码需要注意的一点是，IE下e不存在，从window中获取，简单做了兼容处理。可以尝试使用return false

阻止浏览器默认行为

在开始之前，首先需要了解什么是浏览器的默认行为，我这里简单举几个例子：

  1. 点击a标签，如果设置了href会执行跳转
  2. 点击输入框，输入框会获取焦点
  3. 点击右键，会弹出浏览器右键菜单
  4. 点击submit，会提交其所在表单
  5. 点击checkbox 会选中或者反选

还有其他的很多，这里就不一一列举了

同样的对于阻止浏览器默认行为的实现也分为W3C标准实现和IE实现（这里也只是指IE9以下的实现）

在W3C标准实现中，其基本语法如下：

event.preventDefault();

在IE实现中，其基本语法如下：

window.event.returnValue = false;

所以其兼容版本伪代码如下



function eventCallback(e){

    e = e || window.event;

    if(e.preventDefault){

        e.preventDefault()

    }else {

        e.returnValue = false;

    }

}

这里简单那checkbox做一个小的demo：

<!DOCTYPE>

<html>

    <head>

        <title>preventDefault Demo</title>

    </head>

    <body>

        <h1>Please click on the checkbox</h1>

        <form>

            <label for="chk_just_for_test">Checkbox:</label>

            <input type="checkbox" id="chk_just_for_test"/>

        </form>

        <script>

            let chk = document.querySelector('#chk_just_for_test');

            chk.addEventListener('click',e=>{

                console.log('sorry ,do not let you check this checkbox');

                e.preventDefault(); // 这里不考虑IE低版本兼容性问题

            })

        </script>

    </body>

</html>

有兴趣的其它场景都可以写个小demo 玩玩。

同样W3C标准实现中，我们可以通过event.defaultPrevented 来确定event.preventDefault方法是否被调用，基本模式如下：

if (e.defaultPrevented) {

   /* the default was prevented */

 }

当然不是所有的事件都可以被cancel，浏览器也提供了cancelable属性来判断事件是否可以被取消，如果cancelable为false，那么便无法阻止浏览器的默认行为，如果在一个不可撤销的事件上调用preventDefault，会抛出错误，所以建议在调用之前判断事件是否可被取消.

下面是一个来自于mdn的例子，有兴趣的可以直接看原文

https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable

浏览器厂商提议滚轮事件只有第一次可被取消

function preventScrollWheel(event) {

  if (typeof event.cancelable !== 'boolean' || event.cancelable) {

    // The event can be canceled, so we do so.

    event.preventDefault();

  } else {

    // The event cannot be canceled, so it is not safe

    // to call preventDefault() on it.

    console.warn(`The following event couldn't be canceled:`);

    console.dir(event);

  }

}

document.addEventListener('wheel', preventCancelableEvents);

总结

阻止默认冒泡和阻止浏览器默认行为需要关注的是兼容性问题，其它内容大家只需要关注mdn，已经很详细的列出了兼容问题，对前端&node有兴趣的欢迎微信交流，如果你能看到弹框弹出微信二维码的话

如何阻止冒泡&&浏览器默认行为的更多相关文章

  1. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  3. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  4. angular 点击事件阻止冒泡及默认行为

    经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...

  5. 基本event封装：阻止冒泡、默认事件等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  6. Angular ngClick 阻止冒泡和默认行为

    这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...

  7. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  8. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  9. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

随机推荐

  1. 【模板】P3806点分治1

    [模板]P3806 [模板]点分治1 很好的一道模板题,很无脑经典. 讲讲淀粉质吧,很营养,实际上,点分治是树上的分治算法.根据树的特性,树上两点的路径只有一下两种情况: 路径经过根\((*)\) 路 ...

  2. 我的Android进阶之旅------>Android使用正则表达式匹配扫描指定目录下的所有媒体文件(音乐、图像、视频文件)

    今天使用正则表达式匹配指定目录下的所有媒体文件,下面将这份代码简化了,可以收藏下来,当作工具类. package match; import java.io.File; import java.uti ...

  3. sql性能分析语句

    SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical_reads N'物理读取总次数' ,tota ...

  4. 电话聊天狂人 【STL】

    7-2 电话聊天狂人(25 分) 给定大量手机用户通话记录,找出其中通话次数最多的聊天狂人. 输入格式: 输入首先给出正整数N(≤10​5​​),为通话记录条数.随后N行,每行给出一条通话记录.简单起 ...

  5. java语言中Object对象的hashCode()取值的底层算法是怎样实现的

    Java语言中,Object对象有个特殊的方法:hashcode(), hashcode()表示的是JVM虚拟机为这个Object对象分配的一个int类型的数值,JVM会使用对象的hashcode值来 ...

  6. dotnet core on Linux 环境搭建及入门demo

    首先感谢张善友大大提供的腾讯云实验室链接(https://www.qcloud.com/developer/labs/list). 以下是整个搭建过程及简单demo实例 1.搭建 .NET Core ...

  7. [原创]java向word模板中填充数据（总结）

    使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...

  8. Yii2使用Redis - 从安装redis到使用 [ 2.0 版本 ]

    Yii2使用Redis - 从安装redis到使用 [ 2.0 版本 ] 一.安装Redis和简单配置 1. 下载Redis安装包 地址:http://redis.io/download , 本文选择 ...

  9. 【thrift】vc中使用thrift中文字符串乱码问题解决

    问题描述: VC中使用Apache thrift时,如果字符串中包含中文,会出现乱码问题,这个问题的原因是由于thrift为了达到跨语言交互而使用了UTF-8格式发送字符串,这点对java或者C#不会 ...

  10. unity3d: how to display the obj behind the wall

    透墙显示,遮挡显示,使用ztest Tags { "Queue"="Overlay+1" "RenderType"="Transp ...