html 子元素和父元素都监听了 click 事件，点击子元素时为什么先触发的是父元素的 click 事件？

时间 2019-12-08

标签 html 元素监听 click 事件点击时为什么触发栏目 HTML 繁體版

原文原文链接

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

<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="width:400px;height:400px;background-color:red;border:1px;float:left; z-index:1;" >
            <div id="div2"  style="width:50px;height:50px;background-color:blue;float:left; z-index:2;"  ></div>
        </div>
    </body>
</html>

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

看了文档后瞬间明朗了：java

语法

element.addEventListener( event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：全部 HTML DOM 事件，能够查看咱们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会做为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

addEventListener 主要在第三个参数上面，dom

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

因此，若是想要点击事件从子元素->父元素这样的顺序传递的话，改下参数便可spa

<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>

若是，点击了子元素，不想点击事件向上冒泡的话，能够这样处理code

<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>

或者htm

<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>