javascript如何禁止事件冒泡

本篇內容主要講解“javascript如何禁止事件冒泡”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript如何禁止事件冒泡”吧!

方法：1、利用stopPropagation()方法禁止，但不會阻止默認行為，語法“event.stopPropagation()”；2、利用return方法禁止，同時阻止默認行為，語法“function(){return false}”。

本教程操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript怎么禁止事件冒泡

原生 JS 中，對事件對象 (event) 有 2 種主要的方法；

stopPropagation 和 preventDefault

第一個是禁止冒泡，第二個是阻止默認行為

注：這是原生 JS 的方法，并非 jQuery 的方法，event 形參可以為任何變量，比如用 e 這個也可以的；

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//標準留言器中禁止冒泡；
            // preventDefault中文意思是阻止默認行為；
        }else{
            e.cancelBubble=true;//IE瀏覽器禁止冒泡；IE678
        }
    }

1、事件的禁止冒泡

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//標準留言器中禁止冒泡；
            // preventDefault中文意思是阻止默認行為；
        }else{
            e.cancelBubble=true;//IE瀏覽器禁止冒泡；IE678
        }
    }

2、return 的阻止

    ele.onmouseover=function(){
        return false
    }

區別。

return false 不僅阻止了事件往上冒泡，而且阻止了事件本身。

event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件本身。

整理：

1.event.stopPropagation();

事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（可執行超鏈接的跳轉）

2.return false;

事件處理過程中，阻止了事件冒泡，也阻止了默認行為（不執行超鏈接的跳轉）

還有一種有冒泡有關的：

event.preventDefault();

它的作用是：事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執行所有彈框，卻沒有執行超鏈接跳轉）

到此，相信大家對“javascript如何禁止事件冒泡”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！