jQuery中的e.preventDefault(), e.stopPropagation()的使用

最新推荐文章于 2023-12-07 11:27:04 发布

VilsonYuan

最新推荐文章于 2023-12-07 11:27:04 发布

阅读量3.6k

点赞数

分类专栏： jQuery JavaScript 文章标签： jQuery中的e.preventDef JavaScript中e.prevent e.stopPropagation

本文链接：https://blog.csdn.net/u013690521/article/details/38311921

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

e.preventDefault() 阻止事件的默认行为

e.stopPropagation() 阻止事件冒泡

下面举例说明：

HTML代码

<html>
    <head>
        <title>测试</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <span>点击测试冒泡事件</span>
                </td>
            </tr>
        </table>
    </body>
</html>

JavaScript代码

$(function() {
    $("table").click(function() {
        alert("你点击了table")；
    });
    $("td").click(function() {
        alert("你点击了td");
    });
    $("span").click(function() {
        alert("你点击了span");
    });
});

当我们点击span时，就会看到浏览器弹框，且出现了3次，内容按顺序为：

①你点击了span

②你点击了td

③你点击了table

这种情况就是所谓的事件冒泡。简单说就是事件的执行顺序为从下到上，从里到外，事件依次触发。

但是，有的时候我们不希望冒泡该怎么办呢？

这时候就用到了e.stopPropagation()

$(function() {
    $("table").click(function() {
        alert("你点击了table")；
    });
    $("td").click(function() {
        alert("你点击了td");
    });
    $("span").click(function(e) {
        alert("你点击了span");
        e.stopPropagation();
    });
});

这时候你再点击span，就会发现，浏览器只弹出了“你点击了span”

使用e.preventDefault();

<a href="http://www.baidu.com">测试默认行为<a>

$("a").click(function() {
    alert("你点击了a标签");
});

你会发现当你点击a链接后，浏览器会弹框后跳转到百度首页

下面再看

$("a").click(function(e) {
    alert("测试默认行为");
    e.preventDefault();
});

再次点击该连接后，你会发现它只弹框，而并没有跳转

在jQuery事件中return false等效于同时调用e.preventDefault()和e.stopPropagation()，return false除了阻止默认行为之外，还会阻止事件冒泡

在jQuery的源码中可以看到：

if(ret === false) {
    event.preventDefault();
    event.stopPropagation();
}

VilsonYuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的e.preventDefault(), e.stopPropagation()的使用

e.preventDefault() 阻止事件的默认行为
复制链接

扫一扫

专栏目录