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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。