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;
    } 
}