javascript中冒泡事件的用法案例

發(fā)布時間：2020-10-12 15:17:41 來源：億速云閱讀：161 作者：小新欄目：web開發(fā)

這篇文章主要介紹了javascript中冒泡事件的用法案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

說明：當(dāng)下層元素和上層元素支持同一事件，當(dāng)上層事件觸發(fā)時，下層事件也觸發(fā)，這就叫事件冒泡。

取消事件冒泡：ev.cancelBubble = true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        body{
        background:yellow;}
        div{
        width:300px;
        height:300px;
        background:green;
        }
        </style>
    </head>
    <body  onclick="di()">
        <div onclick="ding()"></div>    
    </body >
    <script>
    function di(){
    alert('底層')
    
    }
    function ding(e){
    var ev = e|| event

// 取消事件冒泡，其實是阻止事件向下傳遞
            ev.cancelBubble = true
    alert('上層社會')
    }
    
    </script>

</html>

點擊上層div，會連帶觸發(fā)下層事件。取消冒泡只需要：ev.cancelBubble = true

javascript中冒泡事件的用法案例

感謝你能夠認真閱讀完這篇文章，希望小編分享javascript中冒泡事件的用法案例內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!

向AI問一下細節(jié)

javascript中冒泡事件的用法案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽