<!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. 解决用友U8删除用户时提示“用户已启用”不能删除的问题

    USE UFSystem go DECLARE @cUser_Id NVARCHAR(20) SET @cUser_Id='用户的登录名' DELETE l FROM dbo.UA_TaskLog l ...

  2. FCC（ES6写法） No repeats please

    把一个字符串中的字符重新排列生成新的字符串,返回新生成的字符串里没有连续重复字符的字符串个数.连续重复只以单个字符为准. 例如, aab 应该返回 2 因为它总共有6中排列 (aab, aab, ab ...

  3. Python 爬虫入门(二)——爬取妹子图

    Python 爬虫入门 听说你写代码没动力?本文就给你动力,爬取妹子图.如果这也没动力那就没救了. GitHub 地址: https://github.com/injetlee/Python/blob ...

  4. [Swift]LeetCode292. Nim游戏 | Nim Game

    You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...

  5. [Swift]LeetCode965. 单值二叉树 | Univalued Binary Tree

    A binary tree is univalued if every node in the tree has the same value. Return true if and only if ...

  6. awk小例子_1_逆序排列

    seq 3 | awk '{ lifo[NR]=$0 } END{ for(lno=NR;lno>-1;lno--){ print lifo[lno]; } }' 结果:3 2 1 空行(lno ...

  7. SpringBoot配置 druid 数据源配置 慢SQL记录

    spring: datasource: url: jdbc:mysql://127.0.0.12:3306/test?autoReconnect=true&useUnicode=true&am ...

  8. AutoFac - 将 autofac 应用于MVC多层项目

    一.前言 AutoFac是.NET平台下的一款著名的IoC Container,它可以让我们很轻松的解除项目中服务类的接口与客户类的接口实现类之间的依赖关系,从而降低系统各模块之间耦合程度以提高系统的 ...

  9. java代码之美（2）---Java8 Stream

    Stream 第一次看到Stream表达式就深深把我吸引,用它可以使你的代码更加整洁而且对集合的操作效率也会大大提高,如果你还没有用到java8的Stream特性,那就说明你确实out啦. 一.概述 ...

  10. Python之高级特性

    一.切片 L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Jack']取出前三个元素 , 笨方法就是通过下标一个一个获取 [L[0], L[1], L[2]]Pyt ...