jQuery阻止事件冒泡

jQuery 提供了两种方式来阻止事件冒泡。

方式一: event.stopPropagation();

$("#div1").mousedown(function(event) {
    event.stopPropagation();
});

方式二:return false;

$("#div1").mousedown(function(event) {
    return false;
});

二者区别:
event.stopPropagation() 则只阻止事件往上冒泡, 不阻止事件本身;
return false 不仅阻止了事件往上冒泡, 而且阻止了事件本身。


代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-3.2.1.min.js"></script>
    <script src="./script.js"></script>
</head>

<body>
    <div id="dTest">
        <a id="aTest" href="http://www.baidu.com/">百度</a>
    </div>
</body>

</html>

情形1:JS代码

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析:当点击“百度”时,会先后弹出’abc-By-a’及’abc-By-div’两个对话框,然后会跳转到百度;

情形2:JS代码
调用事件对象的 .preventDefault() 方法可以阻止事件的默认行为:

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        evt.preventDefault();
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析:当点击“百度”时,会先后弹出’abc-By-a’及’abc-By-div’两个对话框,然后不会跳转到百度;(因为a标签的默认行为被阻止了)
【jQuery 还有另外一个方法 .stopImmediatePropagation() 调用后事件冒泡被阻止同时该元素上后面绑定的事件处理程序也不会执行了】

情形3:JS代码
调用事件对象的 .stopPropagation() 方法可以阻止事件冒泡:

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        evt.stopPropagation();
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析:当点击“百度”时,会先后弹出’abc-By-a’一个对话框,然后会跳转到百度;(因为a标签冒泡被阻止了)

情形4:JS代码
在事件处理程序中直接返回 false 可以同时取消冒泡和阻止默认行为:

$(document).ready(function() {
    $('#aTest').on('click', function(evt) {
        alert('abc-By-a')
        return false;
    })
    $('#dTest').on('click', function() {
        alert('abc-By-div');
    })
})

分析:当点击“百度”时,会弹出’abc-By-a’一个对话框,不会弹出’abc-By-div’对话框,也不会跳转到百度;(因为a标签的默认行为被阻止了,因为a标签冒泡也被阻止了)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值