js阻止事件冒泡的三种方法

博客分类: 笔记 阅读次数: comments

js阻止事件冒泡的三种方法

事件冒泡:

​ 在一个对象上触发某类事件(比如单击事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回 true,那么这个事件会向这个对象的父级对象传播,从里到外,直至他被处理(父级对象所有同类事件都将被激活),或者他到达了对象层次的最顶层,即 document 对象(部分浏览器是 window)

阻止事件冒泡:

​ (根据大拿经验介绍,在公司的实际工作中,阻止事件冒泡是一个很关键的点,非常重要)

​ 一般阻止事件冒泡有三种方法:

  1. return false:

    return 这个命令在执行时,其后的命令是不会再继续执行的;所以我们可以利用这个特性来阻止事件冒泡。

    但是缺点就是,事件处理过程中,虽然阻止了事件冒泡,同时也阻止了默认行为。(函数中阻止冒泡和默认行为,元素属性中只阻止默认行为)

  2. event.stopPropagation();

    这条代码在事件处理过程中同样可以阻止事件冒泡,而且还不会阻止默认行为的继续执行;

  3. event.preventDefault()

    这条命令其实并不能阻止事件冒泡,而是阻止了默认行为,让事件冒泡继续发生。