模态框

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. MT6753平台一项目不同手机最低亮度存偏差问题分析过程

    现象: MT6753平台一项目不同手机将背光高度调到最低,最低亮度存偏差问题,有一些亮,有一些暗. 现象较明显. 分析过程: 第一天: 和TCL屏天一起验证,有以下结论: 1.TCL和YASSI模组, ...

  2. 文件处理： read、readline、 readlines（）

    假设a.txt的内容如下所示: Hello Welcome What is the fuck.. 1. read([size])方法 read([size])方法:从文件当前位置起读取size个字节, ...

  3. [K/3Cloud]如何解决kdpkg无法部署到业务站点的问题

    自从下载了sp1后,就迫不急待的试用下,看看反馈的几个关键bug是否修复,可惜sp1安装后发现业务站点下的组件一个都没有被更新,这指定是有问题了,这真是让哥百思不得其解,真后悔在研发时没仔细研究下部署 ...

  4. Shortest Prefixes（poj 2001）

    题意:给出n个单词(1<=n<=1000),求出每个单词的非公共前缀,如果没有,则输出自己. /* 字典树 在裸字典树的基础上,设置一个sum数组,sum[i]表示i这个节点被用过几次,当 ...

  5. md5加密的工具类（from 韩顺平）

    输入一个字符串,然后可以进行md5加密 import java.security.*; import java.security.spec.*; public class MyTools { publ ...

  6. 洛谷——P1082 同余方程

    P1082 同余方程 题目描述 求关于 x 的同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入输出格式 输入格式: 输入只有一行,包含两个正整数 a, b,用一个空格隔开. 输出格式: 输 ...

  7. 解决canvas跨域问题(图片,视频资源跨域)

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  8. ArcGIS 10 Engine DevelopKit 之安装与帮助;VBA,跨平台CPP,JAVA,ArcGIS Engine DevelopKit 10 的帮助如何打开

    你看到的这个文章来自于http://www.cnblogs.com/ayanmw ArcGIS Engine Developer Kit10 可以从VeryCD上下载到.其不需要破解,只需要你有一个已 ...

  9. C/C++ Threads): Creating worker threads that will be listening to jobs and executing them concurrently when wanted

    Suppose we have two workers. Each worker has an id of 0 and 1. Also suppose that we have jobs arrivi ...

  10. [React Native] Prevent the On-screen Keyboard from Covering up Text Inputs

    When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on ...