javascript如何禁止事件冒泡

本篇內(nèi)容主要講解“javascript如何禁止事件冒泡”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“javascript如何禁止事件冒泡”吧!

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

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript怎么禁止事件冒泡

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

stopPropagation 和 preventDefault

第一個(gè)是禁止冒泡，第二個(gè)是阻止默認(rèn)行為

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

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

1、事件的禁止冒泡

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

2、return 的阻止

    ele.onmouseover=function(){
        return false
    }

區(qū)別。

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

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

整理：

1.event.stopPropagation();

事件處理過(guò)程中，阻止了事件冒泡，但不會(huì)阻擊默認(rèn)行為（可執(zhí)行超鏈接的跳轉(zhuǎn)）

2.return false;

事件處理過(guò)程中，阻止了事件冒泡，也阻止了默認(rèn)行為（不執(zhí)行超鏈接的跳轉(zhuǎn)）

還有一種有冒泡有關(guān)的：

event.preventDefault();

它的作用是：事件處理過(guò)程中，不阻擊事件冒泡，但阻擊默認(rèn)行為（它只執(zhí)行所有彈框，卻沒(méi)有執(zhí)行超鏈接跳轉(zhuǎn)）

到此，相信大家對(duì)“javascript如何禁止事件冒泡”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！