事件委托解决（事件冒泡不行）点击子级触发父级事件

作者: 柠檬树QAQ | 来源:发表于2017-02-26 01:12 被阅读0次

使用append动态添加的子节点，需要重新绑定事件才能使用
事件委托解决（事件冒泡不行）点击子级触发父级事件
事件委托与冒泡、事件捕获
Js-事件
js事件监听事件冒泡和css3新增
【JS】事件委托
01、JavaScript基础
JS和JQuery中的事件委托
事件委托
云平台(1)

经常在网上看到点击按钮出现一个下拉列表
点击下拉列表跳出一个二级标题或跳转页面
用 ul--li--ul--li 的布局试了一下发现点击子级的时候
子级会隐藏（父级li 子级ul包在 li下因为子级ul
也属于li 用冒泡不行）研究了好久用事件委托搞定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{list-style: none; margin: 0;padding: 0;}
        #btn{width:100px;height: 100px;background: red; cursor: pointer;padding-top: 100px; position: relative; }
        #pox{display: none; position: absolute;bottom: -400px;}
        #pox p{width: 100px;height: 400px;background: green;}
    </style>
    <script>
        window.onload=function () {
            var oBtn=document.getElementById('btn');
            var oPox=document.getElementById('pox');
            oBtn.onclick=function (ev) {
                var oEvent=ev||event;
                var oSrc=oEvent.srcElement||oEvent.target;
                if(oSrc.id=='btn'&&oPox.style.display=='block'){
                    oPox.style.display='none';
                }else{
                    oPox.style.display='block';
                }
            }
        }
    </script>



</head>
<body>
<ul>
    <li id="btn">11
        <ul>
            <li id="pox">
                <p></p>
            </li>
        </ul>
    </li>

</ul>
</body>
</html>