• 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

  • 相关阅读:
    【C# 调用 Go 语言】
    Go语言多线程 (转)
    CodeSoft 2019 企业版打标签
    (转)FFT求频谱图和功率谱密度图
    使用NI-DAQmx进行振动数据采集
    CentOS7 安装配置笔记
    .net 调用 nsfwjs 进行视频鉴别
    Electron.Net + Linux + Blazor 初尝备忘录
    关于feign调用的时候,动态传url ,以及自定义head
    go使用excelize导出xls
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6295022.html
Copyright © 2020-2023  润新知