• js事件再解析


    从别人空间摘得http://www.cnblogs.com/yexiaochai/p/3567597.html (强烈建议阅读本文前先看下这篇文章)

    这一个例子看懂了 就基本都搞清楚了

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #p {  300px; height: 300px; padding: 10px;  border: 1px solid black; }
            #c {  200px; height: 200px; border: 1px solid red; }
            #sub {  100px; height: 100px; border: 1px solid red; }
        </style>
    </head>
    <body>
    <div id="p">
        parent
        <div id="c">
            child
            <div id="sub">
                sub
    
            </div>
        </div>
    </div>
    <script type="text/javascript">
    
        window.alert = function (msg) {
            console.log(msg);
        };
    
        var p = document.getElementById('p'),
                c = document.getElementById('c'),
                sub = document.getElementById('sub');
    
        sub.addEventListener('click', function (e) {
            alert('sub节点冒泡');
    
        }, false);
    
        sub.addEventListener('click', function (e) {
            alert('sub节点捕获')
    
        }, true);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获11')
    
            //e.cancelBubble= true;
    
        }, true);
    
        p.addEventListener('click', function (e) {
            alert('父节点冒泡')
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点捕获');
    
        }, true);
    
        c.addEventListener('click', function (e) {
            alert('子节点冒泡');
            //e.stopPropagation();
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获')
    
        }, true);
    
    </script>
    </body>
    </html>

    其中不管是捕获/处于/冒泡 那个阶段, 向组织事件进一步传播 统一用event.stopPropagation();

    ps:奇葩微软的e.cancleBubble= true 测试在ie9以上已经没用了,ie9以上也可以用event.stopPropagation();了

    ps2:e.cancleBubble 容易给人造成误解,以为它只是专门用来组织冒泡的!实际上它阻止的事事件三个阶段!!!!

    接下来又尝试 让所有事件都不捕获呢?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #p {  300px; height: 300px; padding: 10px;  border: 1px solid black; }
            #c {  200px; height: 200px; border: 1px solid red; }
            #sub {  100px; height: 100px; border: 1px solid red; }
        </style>
    </head>
    <body>
    <div id="p">
        parent
        <div id="c">
            child
            <div id="sub">
                sub
    
            </div>
        </div>
    </div>
    <script type="text/javascript">
    
        window.alert = function (msg) {
            console.log(msg);
        };
    
        var p = document.getElementById('p'),
                c = document.getElementById('c'),
                sub = document.getElementById('sub');
    
        sub.addEventListener('click', function (e) {
            alert('sub节点冒泡');
    
        }, false);
    
        sub.addEventListener('click', function (e) {
            alert('sub节点捕获')
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获11')
    
            //e.cancelBubble= true;
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点冒泡')
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点捕获');
    
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点冒泡');
            //e.stopPropagation();
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获')
    
        }, false);
    
    </script>
    </body>
    </html>

    结果事:

    在一种情况:如果上面有一个遮罩呢?  三个嵌套的盒子会产生事件吗

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #p {  300px; height: 300px; padding: 10px;  border: 1px solid black; }
            #c {  200px; height: 200px; border: 1px solid red; }
            #sub {  100px; height: 100px; border: 1px solid red; }
            .float-left{
                position: absolute;
                left: 0;
                top: 0;
                 150px;
                height: 100px;
                padding: 10px;
                background-color: royalblue;
                border: 1px solid black;
                opacity:.5;
            }
        </style>
    </head>
    <body>
    <div id="p">
        parent
        <div id="c">
            child
            <div id="sub">
                sub
    
            </div>
        </div>
    </div>
    
    <div class="float-left">
        我会定位了哦~~~
    </div>
    <script type="text/javascript">
    
        window.alert = function (msg) {
            console.log(msg);
        };
    
        var p = document.getElementById('p'),
                c = document.getElementById('c'),
                sub = document.getElementById('sub');
    
        sub.addEventListener('click', function (e) {
            alert('sub节点冒泡');
    
        }, false);
    
        sub.addEventListener('click', function (e) {
            alert('sub节点捕获')
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获11')
    
            //e.cancelBubble= true;
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点冒泡')
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点捕获');
    
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点冒泡');
            //e.stopPropagation();
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获')
    
        }, false);
    
    </script>
    </body>
    </html>

     答案:点击在遮罩上则没有任何事件产生!!

    下面事遮罩上有事件的情况  三个嵌套的盒子会产生事件吗

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #p {  300px; height: 300px; padding: 10px;  border: 1px solid black; }
            #c {  200px; height: 200px; border: 1px solid red; }
            #sub {  100px; height: 100px; border: 1px solid red; }
            .float-left{
                position: absolute;
                left: 0;
                top: 0;
                 150px;
                height: 100px;
                padding: 10px;
                background-color: royalblue;
                border: 1px solid black;
                opacity:.5;
            }
        </style>
    </head>
    <body>
    <div id="p">
        parent
        <div id="c">
            child
            <div id="sub">
                sub
    
            </div>
        </div>
    </div>
    
    <div class="float-left">
        我会定位了哦~~~
    </div>
    <script type="text/javascript">
    
        window.alert = function (msg) {
            console.log(msg);
        };
    
        var p = document.getElementById('p'),
                c = document.getElementById('c'),
                sub = document.getElementById('sub');
    
        sub.addEventListener('click', function (e) {
            alert('sub节点冒泡');
    
        }, false);
    
        sub.addEventListener('click', function (e) {
            alert('sub节点捕获')
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获11')
    
            //e.cancelBubble= true;
    
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点冒泡')
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点捕获');
    
        }, false);
    
        c.addEventListener('click', function (e) {
            alert('子节点冒泡');
            //e.stopPropagation();
        }, false);
    
        p.addEventListener('click', function (e) {
            alert('父节点捕获')
    
        }, false);
    
        var fleft= document.querySelector('.float-left');
        fleft.addEventListener('click', function (e) {
            alert('fleft捕获')
        }, true);
        fleft.addEventListener('click', function (e) {
            alert('fleft冒泡')
        }, false);
    
    </script>
    </body>
    </html>

    在点击时候发现:

    只有它自己的两个事件产生!!三个嵌套的盒子不会产生事件

    所以可以总结:事件的分阶段传播,是当有 盒子嵌套时候才会发生!!我们这个fleleft元素 内层没有元素,外层为body,所有不会影响那三个嵌套的盒子!

    别人的博客链接:http://www.cnblogs.com/yexiaochai/p/3567597.html

  • 相关阅读:
    git更新或者还原本地代码
    log4net配置文件
    用ASP.NET MVC仿站糗事百科
    为表创建索引
    VisualStudio2008+水晶报表的使用
    C#中的位的或运算的理解
    char.IsLetter的使用
    C# 邮箱的使用
    NPOI DataTable导出excel
    NPOI DataSet导出excel
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6295022.html
Copyright © 2020-2023  润新知