彈出我的資料,阻止冒泡

時間 2019-11-18 標籤彈出我的資料阻止冒泡

彈出我的資料,效果以下

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        ul{
            display: none;
        }
    </style>
    <body>
        <input id="btn" type="button" value="顯示我的資料" />
        <ul id="box">
            <li>姓名：劉德華</li>
            <li>職業：演員</li>
            <li>做品：無間道</li>
        </ul>
    </body>
</html>
<script type="text/javascript">
    let $btn = document.querySelector('#btn'),
        $box = document.querySelector('#box');
    $btn.onclick = function(e){
        e = e || window.event;
        $box.style.display = "block";
        //阻止冒泡,不然點擊事件也會觸發document的事件
        e.stopPropagation ? e.stopPropagation() : e.cancelBuble = true;
    }
    document.onclick = function(){
        $box.style.display = "none";
    }   
</script>