Javascript 与事件传播相关：父（focusout）和子（click）的不同事件都是触发器_Javascript_Html_Css_Dom Events

Javascript 与事件传播相关：父（focusout）和子（click）的不同事件都是触发器

javascript html css

Javascript 与事件传播相关：父（focusout）和子（click）的不同事件都是触发器,javascript,html,css,dom-events,Javascript,Html,Css,Dom Events,单击按钮以显示和/或关闭对话框窗口显示对话框注意：对话框元素仅在Chrome37+、Safari6+和Opera24+中受支持关闭对话框 var x=document.getElementById（“myDialog”）； document.getElementById（“btn”）.addEventListener（“单击”，关闭对话框）； x、 addEventListener（“模糊”，关闭对话框）；函数showDialog（）{ x、 style.display=“flex”；

单击按钮以显示和/或关闭对话框窗口

显示对话框注意：对话框元素仅在Chrome37+、Safari6+和Opera24+中受支持

关闭对话框 var x=document.getElementById（“myDialog”）； document.getElementById（“btn”）.addEventListener（“单击”，关闭对话框）； x、 addEventListener（“模糊”，关闭对话框）；函数showDialog（）{ x、 style.display=“flex”； x、焦点（）； } 函数closeDialog（）{ x、 style.display=“无”；控制台日志（“单击”）； } 我有上面触发两个事件侦听器的代码，但是当我将内部div更改为

id='btn'

更改为button id='btn'时，只会触发一个事件，但当我单击按钮时，但当我单击内部div时，两个事件都会被触发。我不知道为什么。任何帮助，因为我需要知道这是什么原因

只有铬

在下面添加了代码笔链接：

我尝试将

关闭对话框

更改为

关闭对话框

，并得到了相同的结果两个案例得到了相同的结果？对我来说，这是不同的，我检查一下，你的文本中的id后面没有空格。

<html>
    <body>
    <p>Click the buttons to show and/or close the dialog window.</p>

    <button onclick="showDialog()">Show dialog</button>


    <p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p>

    <div tabindex=-1 id="myDialog" style="display:none">
        <div id="btn">Close dialog</div>
    </div>

<script>
    var x = document.getElementById("myDialog");
    document.getElementById("btn").addEventListener('click', closeDialog);
    x.addEventListener("blur", closeDialog);

    function showDialog() {
        x.style.display = "flex";
        x.focus();
    }

    function closeDialog() {
        x.style.display = "none";
        console.log("clicked");
    }
</script>

</body>
</html>