3

JS捕获冒泡

 3 years ago
source link: https://zdb.im/archives/214.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JS捕获冒泡

<div id="outDiv">
    <div id="middleDiv">
        <div id="inDiv">请在此点击鼠标。</div>
    </div>
</div>
<div id="info"></div>

<script>
    // 先顶层捕获再往里层 true , 后从里层往外冒泡 false 
    // event.preventDefault(); 阻止默认行为
    // event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
    window.onload = function () {
        var outDiv = document.getElementById("outDiv");
        var middleDiv = document.getElementById("middleDiv");
        var inDiv = document.getElementById("inDiv");
        var info = document.getElementById("info");
        outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, true);
        middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
        inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, true);
    }
</script>

标签: none


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK