• html 子元素和父元素都监听了 click 事件,点击子元素时为何先触发的是父元素的 click 事件?


     先上一段代码,点击子元素时先触发的是父元素的 click 事件

    <html>
        <head>
            <script type="text/javascript">
                function onLoads(){
                    document.getElementById("div1").addEventListener("click",(e) => {
                        alert('1');
                    }, true);
    
                    document.getElementById("div2").addEventListener("click",(e) => {
                        alert('2');
                    }, true);
                }
            </script>
        </head>
        <body onload="onLoads()">
            <div id="div1"   style="400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" >
                <div id="div2"  style="50px;height:50px;background-color:blue;float:left; z-index:2;"  ></div>
            </div>
        </body>
    </html>

    点击蓝色代码时会先弹出 1,然后弹出2; 说明先父元素事件先触发,然后是子元素事件触发

    看了文档后瞬间明朗了:

    语法

    element.addEventListener(eventfunctionuseCapture)

    参数值

    参数描述
    event 必须。字符串,指定事件名。

    注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 

    提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册
    function 必须。指定要事件触发时执行的函数。 

    当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
    useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

    可能值:
    • true - 事件句柄在捕获阶段执行
    • false- false- 默认。事件句柄在冒泡阶段执行

     

    addEventListener 主要在第三个参数上面,

    冒泡阶段:这类似与池塘里的涟漪,从事件中心点,向上层传播。而事件捕获和这个顺序正好相反。

    所以,如果想要点击事件从 子元素->父元素 这样的顺序传递的话,改下参数即可

    <script type="text/javascript">
                function onLoads(){
                    document.getElementById("div1").addEventListener("click",(e) => {
                        alert('1');
                    }, false);
    
                    document.getElementById("div2").addEventListener("click",(e) => {
                        alert('2');
                    }, false);
                }
    </script>

    如果,点击了子元素,不想点击事件向上冒泡的话,可以这样处理

    <script type="text/javascript">
                function onLoads(){
                    document.getElementById("div1").addEventListener("click",(e) => {
                        alert('1');
                        e.cancelBubble = true;
                    }, false);
    
                    document.getElementById("div2").addEventListener("click",(e) => {
                        alert('2');
                        e.cancelBubble = true;
                    }, false);
                }
    </script>    

    或者

    <script type="text/javascript">
                function onLoads(){
                    document.getElementById("div1").addEventListener("click",(e) => {
                        alert('1');
                        e.stopPropagation();
                    }, false);
    
                    document.getElementById("div2").addEventListener("click",(e) => {
                        alert('2');
                        e.stopPropagation();
                    }, false);
                }
    </script> 
  • 相关阅读:
    c# WinForm开发 DataGridView控件的各种操作总结(单元格操作,属性设置)
    linux服务之rsyslog
    java实现第五届蓝桥杯李白打酒
    java实现第五届蓝桥杯李白打酒
    java实现第五届蓝桥杯猜字母
    java实现第五届蓝桥杯猜字母
    java实现第五届蓝桥杯大衍数列
    java实现第五届蓝桥杯大衍数列
    redis 安装启动及设置密码<windows>
    redis密码设置、访问权限控制等安全设置
  • 原文地址:https://www.cnblogs.com/liugx/p/9555353.html
Copyright © 2020-2023  润新知