JS阻止冒泡出现(cancelBubble=true;与stopPropagation

案例代码:

<div onclick="viewType(this);" id="type_select_class" class="selectClass">
 <div class="title"><em>类型:</em><span id="current_type_name">全部</span></div>
    <ul class="class" id="menu_type_list">
        <li οnclick="setStyleType('0','全部',event);return false;">全部</li>
        <li οnclick="setStyleType('001001','可爱',event);return false;">可爱</li>
        <li οnclick="setStyleType('001002','幽默',event);return false;">幽默</li>
        <li οnclick="setStyleType('001003','神秘',event);return false;">神秘</li>
        <li οnclick="setStyleType('007006','东方神起',event);return false;">东方神起</li>
        <li οnclick="setStyleType('007007','少女时代',event);return false;">少女时代</li>
    </ul>
</div>
如上所显示,父类和子标签下都有一个onclick事件,所谓的冒泡就是,点击子类的会连带的触发父类的的事件。从而造成不想要的联动。

解决方案:

<script>
function setStyleType(style_type,sytle_name,event){
 //阻止冒泡调用parent
 var e = (event) ? event : window.event;
 if (window.event) {//IE
  e.cancelBubble=true;
 } else { //FF
  e.stopPropagation();
 }

 //继续下面的动作。。。。。。
 $("#type_select_class").removeAttr("class");
 $("#type_select_class").attr("class", "selectClass2");
 $("#current_type_name").html(sytle_name);
 getItemList();
}
</script>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值