DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js阻止事件冒泡stopPropagation()、cancelBubble、preventDefault()、return false的分析
js阻止事件冒泡stopPropagation()、cancelBubble、preventDefault()、return false的分析
編輯:JavaScript基礎知識     

事件冒泡,舉個列子:

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

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

有些時候,我們不希望發生父元素的事件,只發生子元素的事件,這時候就需要阻止事件冒泡。有一下幾個方法,分別分析一下:

1、event.stopPropagation();

2、event.cancelBubble = true;

3、event.preventDefault();

4、return false;

一、event.stopPropagation();

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

 

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

注:之前看到說是不兼容IE8及一下,親測IE6以上沒問題,如有錯,望指出。

二、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…},

所以不在點擊事件裡面傳event。(不要這樣:$('a').click(function(event){});)。效果跟上面的是一樣:先彈出‘點擊了a’,然後跳轉百度。剛剛測的時候,好像兼容性也還好。

三、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’。

(注:最好使用stopPropagation,避免preventDefault跟cancelBubble的event的對象不一致);

四、最後的一個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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved