现在的位置: 首页 > 综合 > 正文

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

2017年12月27日 ⁄ 综合 ⁄ 共 1108字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.