HTML DOM-->事件對象(阻止冒泡、阻止默認行為)

本文轉載自查看原文 2020-05-04 22:41 582 javascript

1.阻止冒泡：

　　　stopPropagation()

　　舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>    
    </head>

    <body>
        <div id="box1" style="background-color: #00FFFF;width: 70px;height: 70px;">
        </div>
        <input type="text" id="box2">
        <script type="text/javascript">
            document.body.onclick=function(){
                this.style.backgroundColor='yellow'
            }
            
            document.getElementById('box1').onclick= function(e){
                var ev = e || window.event
                //阻止冒泡
                ev.stopPropagation()
                this.style.backgroundColor = 'pink'
            }
            
            document.getElementById('box2').onclick = function(e){
                var ev = e || window.event
                //阻止冒泡
                ev.stopPropagation()
            }

        </script>
    </body>
</html>

　　輸出：body元素背景不會變成黃色

2.阻止默認行為：

　　preventDefault() 方法阻止元素發生默認的行為。

　　例如：

　　　　當點擊提交按鈕時阻止對表單的提交

　　　　阻止以下 URL 的鏈接

　　代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>    
    </head>

    <body>
        <a id='box1' href="https://www.cnblogs.com/">學習一下</a>
        <script type="text/javascript">
            document.getElementById('box1').onclick= function(e){
                var ev = e || window.event
                var info = window.confirm('您瀏覽的瀏覽器存在風險，是否繼續瀏覽？')
                if (info == false){
                    //阻止默認行為
                    ev.preventDefault()
                }    
            }
        </script>
    </body>
</html>

　　輸出：若點擊對話框“取消”，將不會跳入鏈接頁面

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js dom 阻止事件冒泡，阻止事件的默認行為阻止事件冒泡和阻止事件默認行為如何阻止事件冒泡和默認行為？ js事件冒泡、阻止事件冒泡以及阻止默認行為 javascript如何阻止事件冒泡和默認行為 angular 點擊事件阻止冒泡及默認行為 vuejs-阻止事件冒泡與默認行為 DOM事件流 (事件捕獲和事件冒泡）以及阻止默認事件和阻止冒泡事件阻止事件冒泡和默認行為，禁止鍵盤事件 JS阻止冒泡和取消默認事件(默認行為)