JavaScript中處理時間冒泡的方法(兼容高低級瀏覽器)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件冒泡處理</title>
    </head>
    <style>
        body{
            background-color:red;
        }
        div{
            width:300px;
            height:300px;
            background:aqua;
        }
    </style>
    <body onclick="bottomPevel();">
        <div onclick="topPevel();"></div>
    </body>
    <script>
        //事件冒泡:一次觸發了兩次不同的事件
        //點擊事件:onclick
        //取消事件冒泡:ev.cancelBubble=ture
        function bottomPevel(e){
            alert('底層事件')
        }
        function topPevel(e){
            //取消事件冒泡,阻止事件往下傳
            var ev = e || event//兼容性設置
            ev.cancelBubble=true
            alert('上層事件')
        }
    </script>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章