<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=\, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>事件冒泡</title>

  <style>

    .big{

      width: 500px;

      height: 500px;

      border: 1px solid red;

    }

    .two{

      width: 300px;

      height: 300px;

      border: 1px solid green;

    }

    .three{

      width: 100px;

      height: 100px;

      border: 1px solid yellow;

    }

  </style>

</head>

<body>

    <div class="big">

      <div class="two">

        <div class="three"></div>

      </div>

    </div>

    <script>

      let big = document.getElementsByClassName('big')[0]

      let two = document.getElementsByClassName('two')[0]

      let three = document.getElementsByClassName('three')[0]

      big.onclick = function () {

        alert('big')

      }

      two.onclick = function () {

        alert('two')

      }

      three.onclick = function (e) {

        // 不阻止冒泡  会依次弹出 three two big

        e.stopPropagation() // 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转

        // return false; // 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转 直接就不执行事件直接跳出了

        // event.preventDefault(); // 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

       alert('three')

      }

    </script>

</body>

</html>

js事件冒泡机制的更多相关文章

  1. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  2. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  3. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  4. js的事件冒泡机制

    js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄

  5. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  6. JavaScript中的事件冒泡机制

    事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...

  7. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  8. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  9. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

随机推荐

  1. 《Android插件化开发指南》面世

    本书在京东购买地址:https://item.jd.com/31178047689.html 本书Q群:389329264 (一)这是一本什么书 如果只把本书当作纯粹介绍Android插件化技术的书籍 ...

  2. XQuery 术语

    XQuery 术语 节点 在 XQuery 中,有七种节点:元素.属性.文本.命名空间.处理指令.注释.以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或者根节点. 请看下 ...

  3. [SQL]LeetCode262.行程和用户 | Trips and Users

    SQL架构 Create table If Not Exists Trips (Id )) Create table If Not Exists Users (Users_Id ), Role ENU ...

  4. [Swift]LeetCode721. 账户合并 | Accounts Merge

    Given a list accounts, each element accounts[i] is a list of strings, where the first element accoun ...

  5. 一文掌握 Linux 性能分析之网络篇（续）

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 这是 Linu ...

  6. React中的通讯组件

    1.父传子:     传递:当子组件在父组件中当做标签使用的时候,给当前子组件绑定一个自定义属性,值为需要传递的数据     接收:在子组件内部通过this.props进行接收 2.子传父     传 ...

  7. IO复用(较详细)

    进程与线程的描述 一个进程至少会创建一个线程,多个线程共享一个程序进程的内存.程序的运行最终是靠线程来完成操作的.线程的数量跟CPU核数有关,一个核最多能发出两个线程.线程的操作主要分为:一:给CPU ...

  8. spring统一错误响应设置

    在类入口增加 @RestControllerAdvice注解.可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@RequestMap ...

  9. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  10. 线程安全(中)--彻底搞懂synchronized(从偏向锁到重量级锁)

    接触过线程安全的同学想必都使用过synchronized这个关键字,在java同步代码快中,synchronized的使用方式无非有两个: 通过对一个对象进行加锁来实现同步,如下面代码. synchr ...