js的stopPropagation()、cancelBubble、preventDefault()、return false的分析

時間 2019-12-20

標籤 stoppropagation cancelbubble preventdefault return false 分析欄目 JavaScript 简体版

原文原文鏈接

我的筆記，若有錯誤，望指出。html

事件冒泡，舉個列子：jquery

<li>
    <a href='http://www.baidu.com'>點擊a</a>
</li>
<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function () {
        alert('點擊了a');
    });
</script>

當你點擊a的時候，會先彈出‘點擊了a’，再彈出‘點擊了li’，最後跳轉到百度。簡單理解就是先執行子元素的事件，再執行父元素的事件，跟事件捕獲相反。chrome

有些時候，咱們不但願發生父元素的事件，只發生子元素的事件，這時候就須要阻止事件冒泡。分析一下事件冒泡，順便分析一下阻止瀏覽器默認行爲的一些方法：瀏覽器

一、event.stopPropagation();（阻止冒泡）函數

二、event.cancelBubble = true;（阻止冒泡）學習

三、event.preventDefault();（阻止瀏覽器默認行爲）測試

四、return false;（有不少行爲）spa

1、event.stopPropagation();firefox

<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function (event) {
        alert('點擊了a');
        event.stopPropagation();
    });
</script>

完美阻止了li元素的冒泡，而且不會影響a的事件。效果是：先彈出‘點擊了a’，而後跳轉百度code

注：以前看到說是不兼容IE8及一下，親測IE6以上沒問題，若有錯，望指出。

2、event.cancelBubble = true;

<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function () {
        alert('點擊了a');
        console.log(event);
        event.cancelBubble = true;
    });
</script>

使用cancelBubble須要注意：

event事件是窗口的MouseEvent，此處console.log打印的是：MouseEvent {isTrusted: true, screenX: 55, screenY: 90, clientX: 55, clientY: 29…}

。效果跟上面的是同樣：先彈出‘點擊了a’，而後跳轉百度。剛剛測的時候，好像兼容性也還好。

3、event.preventDefault();

<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function (event) {
        alert('點擊了a');
        event.preventDefault();
    });
</script>

執行後的效果：先彈出‘點擊了a’，再彈出‘點擊了li’，可是，不執行跳轉！不執行跳轉！不執行跳轉！

其實，default英文意思是默認的，想一想不難理解，頁面中，除了執行監聽事件還會觸發瀏覽器默認動做; 執行監聽事件在前, 觸發瀏覽器默認動做在後。

preventDefault並非阻止事件冒泡，只是阻止瀏覽器的默認動做。而stopPropagation跟cancelBubble只是阻止事件冒泡，並無阻止

瀏覽器的默認動做。當咱們但願阻止事件冒泡的同時，也阻止瀏覽器的默認動做時，就能夠2者都一塊兒使用，以下代碼：

<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function (event) {
        alert('點擊了a');
        console.log(event);
        event.stopPropagation();
        event.preventDefault();
    });
</script>

效果是：只彈出‘點擊了a’，並不跳轉百度連接，也不彈出‘點擊了li’。

4、最後的一個return false;

<script>
    $('li').click(function () {
        alert('點擊了li');
    });
    $('a').click(function () {
        alert('點擊了a');
        return false;
    });
</script>

執行效果：只彈出‘點擊了a’，並不跳轉百度連接，也不彈出‘點擊了li’。跟（stopPropagation+preventDefault）是一個效果。

退出執行, return false 以後的全部觸發事件和動做都不會被執行. 有時候 return false 能夠用來替代stopPropagation() 和

preventDefault(), 好比上面的例子。

值得注意的一點：有人認爲 return false = stopPropagation() + preventDefault()，實際上是錯的。 return false 不但阻止事件，

還能夠返回對象, 跳出循環等... 方便地一刀切而不夠靈活, 濫用易出錯。

貼一下本博客的html的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <ul>
        <li>
            <a href='#'>點擊a</a>
        </li>
    </ul>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $('li').click(function () {
            alert('點擊了li');
        });
        $('a').click(function (event) {
            alert('點擊了a');
            console.log(event);
            event.stopPropagation();
            // event.cancelBubble = true;
            event.preventDefault();
            // return false;
        });
    </script>
</body>
</html>

補充：謝謝博友指出，對於return false;我說明的比較少，其實return false並非事件冒泡，本文講的是跟事件冒泡有關的內容，return false在某種狀況下也能實現。

由於return false不但阻止了事件，也阻止了瀏覽器的默認行爲，就像一個終止符，也經常用它來阻止提交表單或者繼續執行下面的代碼，而且只在當前函數下

有用，return false執行了如下行爲：

一、執行event.preventDefault(); 阻止瀏覽器的默認行爲；

二、event.stopPropagation(); 阻止冒泡行爲；

三、中止回調函數執行並當即返回。

寫文章以前，我看到這樣一句話：「cancelBubble用於ie的阻止冒泡事件，event.stopPropagation（）用於firefox和chrome等其餘瀏覽器。」。我不

知道如今仍是不是這樣子，測試的時候兼容是好的，因此就沒有說明這一點。固然，爲了保險起見，博友幫我封了一個函數，感謝！文中不對之處還望指出，多多學習。

//阻止冒泡事件
function stopBubble(e){
    if(e && e.stopPropagation){
        // 非IE瀏覽器
        e.stopPropagation();
    }else{ 
        //IE瀏覽器
        window.event.cancelBubble=true;
    }
}

同理，若是想阻止瀏覽器的默認事件

//阻止瀏覽器默認行爲
function stopDefault(e){ 
    //標準瀏覽器
    if(e && e.preventDefault){ 
        e.preventDefault(); 
    } 
    //個別IE
    else{ 
        window.event.returnValue=fale;
        return false;
    } 
}

相關標籤/搜索

stoppropagation&preventdefault&return

try..return..catch..return..finally...return

stopimmediatepropagation&stoppropagation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。