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

时间：2022-11-24 13:02:55

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


标签：

相关文章