阻止事件冒泡

事件冒泡指事件在初始DOM上触发,通过DOM树往上在每一级父元素上触发。

阻止事件向上冒泡,一般用return false;但是return false 的实际作用为:

   event.preventDefault();

   event.stopPropagation();

   停止回调函数执行并立即返回。


如果$("div a").click(function(){ return false}),再需要点击div时,$("div").click(function(){})事件不会被触发,此时解决方法为

第一种情况:

("div.post").click(function(){
    $("div.post .content").hide();          // hide all content
    $(this).children(".content").show();    // show this one
});

$("div.post a").click(function(e) {
    var href = $(this).attr("href");
    $(this).next().load(href);
    e.preventDefault();
});
第二种情况:

$("div.post").click(function(){
    // do something
});
$("div.post a").click(function(e){
    // 浏览器跳转到新页面(默认行为)
    // 但阻止事件冒泡,即不会执行$("div.post").click()
    e.stopPropagation();
});

另外:return false和live/delegate事件不要混用。


event.stopPropagation()用于阻止事件冒泡,jQuery中还有另一个函数:event.stopImmediatePropagation(),它用于阻止一个事件的继续执行,即使当前对象上还绑定了其他处理函数:

$("div a").click(function(){
    // do something
});

$("div a").click(function(e){
    // stop immediate propagation
    e.stopImmediatePropagation();
});



return false ----》 在事件的处理中,可以阻止默认事件和冒泡事件。 
2:event.preventDefault()---》在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。 
3:event.stopPropagation()---》在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值