模态框

1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍

2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body, html {

            height: 100%;

        }

        .mask {

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            background: rgba(0, 0, 0, 0.6);

            display: none;

        }

        .login {

            width: 200px;

            height: 200px;

            background: white;

            margin: 200px auto;

            border: 3px solid #FFA25E;

        }

    </style>

</head>

<body>

<a href="#">注册</a>

<a href="#">登陆</a>

<div class="mask">

    <div class="login" id="login"></div>

</div>

<script>

    //需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏

    var a = document.getElementsByTagName("a")[1];

    var mask = document.getElementsByTagName("div")[0];

    a.onclick = function (ev) {

        ev = ev || window.event;

        mask.style.display = "block";

        if (ev || ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;

        }

    }

    document.onclick = function (ev) {

        ev = ev || window.event;

        var targetId = ev.target ? ev.target.id : ev.srcElement.id;

        if (targetId !== "login") {

            mask.style.display = "none";

        }

    }

</script>

</body>

</html>

事件委托

1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。

2、虽然新追加的li标签没有注册上单击事件，但是冒泡的特性会找到其父标签，恰好父标签注册了单击，而触发事件的target目标元素如果是li标签就好办了。

3、注意通过event.target.tagName获取的值是大写的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        ul {

            width: 100px;

            margin: 50px auto;

        }

        li {

            background: #CCA55B;

            margin: 10px;

            cursor: pointer;

            text-align: center;

        }

    </style>

</head>

<body>

<button>创建新人</button>

<ul>

    <li>老人</li>

    <li>老人</li>

    <li>老人</li>

    <li>老人</li>

</ul>

<script>

    var btn = document.getElementsByTagName("button")[0];

    var ul = document.getElementsByTagName("ul")[0];

    // for (var i = 0; i < ul.children.length; i++) {

    //     ul.children[i].onclick = function () {

    //         console.log(this.innerHTML);

    //     }

    // }

    btn.onclick = function () {

        for (var i = 0; i < 4; i++) {

            var li = document.createElement("li");

            li.innerHTML = "新人";

            ul.appendChild(li);

        }

    }

    ul.onclick = function (ev) {

        ev = ev || window.event;

        var target = ev.target ? ev.target : ev.srcElement;

        if (target.tagName === "LI") {

            console.log(target.innerHTML);

        }

    }

</script>

</body>

</html>

JS——冒泡案例的更多相关文章

  1. JS冒泡事件 与 事件捕获

    JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...

  2. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...

  5. Js冒泡事件详解及阻止

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html>     & ...

  6. js计算器案例

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

  7. 浅谈js冒泡事件2

    js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. 正則表達式--js使用案例

    前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...

随机推荐

  1. E - Super Jumping! Jumping! Jumping! DP

    Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...

  2. [bzoj2657][Zjoi2012]旅游 journey_ 对偶图_树形dp

    旅游 bzoj-2657 Zjoi-2012 题目大意:题目链接 注释:$1\le K\le 2\cdot 10^5$. 想法:这题... 感觉和上一个题的提示有些类似,就是题目生怕你不知道这是一道对 ...

  3. T1081 线段树练习 2 codevs

    http://codevs.cn/problem/1081/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题目描述 Description 给你N个数, ...

  4. tomcat上传图片失败

    今天,突然遇到个奇怪的问题,tomcat上传图片时好时坏,经查线上四台服务有一台服务器硬盘满了. 解决一下硬盘空间的问题,有好使了,那么图片上传通过流写到远程对象存储服务中,并没有落盘和硬盘满有哪些关 ...

  5. Ubuntu 16.04安装GIMP替代PS

    GIMP虽然不能完全替代PS,但是也能弥补一下. 系统默认源中已经包含了GIMP,不需要使用PPA这些. 安装: sudo apt-get install gimp 启动: 通过Dash搜索GIMP即 ...

  6. ms sql SERVER 下载

    企业版DVD SQL Server 2005 Enterprise Edition(支持超大型企业) 32 位DVD: ed2k://|file|cs_sql_2005_ent_x86_dvd.iso ...

  7. iOS 打开扬声器以及插入耳机的操作

    废话不多说说一下现状 网上好多关于扬声器的操作,可是问题多多.SDK7.X 和SDK7.X以上版本号有点诧异 #import <Foundation/Foundation.h> #impo ...

  8. hdu 5078 2014鞍山现场赛 水题

    http://acm.hdu.edu.cn/showproblem.php?pid=5078 现场最水的一道题 连排序都不用,由于说了ti<ti+1 //#pragma comment(link ...

  9. unity3D游戏开发实战原创视频讲座系列7之消消乐游戏开发

    解说文件夹 第一讲  游戏介绍和资源简单介绍 第二讲  游戏场景背景的搭建 第三讲  游戏特效预制体的制作 第四讲  游戏场景前景的显示 第五讲  瓷砖背景块 第六讲  方块的消除 第七讲  方块的交 ...

  10. LeetCode 939. Minimum Area Rectangle (最小面积矩形)

    题目标签:HashMap 题目给了我们一组 xy 上的点坐标,让我们找出 能组成矩形里最小面积的那个. 首先遍历所有的点,把x 坐标当作key 存入map, 把重复的y坐标 组成set,当作value ...