专栏首页Puppeteer学习如何阻止冒泡&&浏览器默认行为

如何阻止冒泡&&浏览器默认行为

摘要

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

阻止事件冒泡

什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简述一下如何阻止事件冒泡,阻止事件冒泡在使用浏览器原生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有兴趣的欢迎微信交流,如果你能看到弹框弹出微信二维码的话?。

附录

每个API的浏览器兼容情况如下: event.stopPropagation

event.stopImmediatePropagation

window.event.returnValue

event.preventDefault

event.cancelable

event.cancelBubble

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于puppeteer模拟登录抓取页面

    在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine)

    Jerremy
  • 一步一步学习Vue(十一)

    Jerremy
  • 简析hotjar录屏功能实现原理

    众所周知,hotjar中录屏功能是其重要的一个卖点,看着很牛X酷炫的样子,今天就简单的分析一下其可能实现(这里只根据其请求加上个人理解分析,并不代表hotjar...

    Jerremy
  • 第43天:事件对象event

    一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

    半指温柔乐
  • Libevent源码分析系列

    源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了,然后去看底层相应的源码,这样比较有条理,自上向下掌握。下面用libevent库写个程...

    用户3033338
  • Libevent源码分析系列【转】

    转自:https://www.cnblogs.com/zxiner/p/6919021.html

    用户3033338
  • Event(事件)的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

    sam dragon
  • JS 外观模式

    外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。 外观模式在JS中常常用于解决浏...

    SHERlocked93
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框...

    IMWeb前端团队
  • javascript当中冒泡(event bubble)用法

    9.冒泡(event bubble) 缺省情况下,当几个元素重合,事件从最上层元素开始往下层元素传播。 例 9.1(bubbleIEFF.html) <head...

    马克java社区

扫码关注云+社区

领取腾讯云代金券