当前位置: 代码迷 >> JavaScript >> JS遏止冒泡出现(cancelBubble=true;与stopPropagation
  详细解决方案

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

热度:207   发布时间:2012-11-23 00:03:43.0
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?onclick="setStyleType('0','全部',event);return false;">全部</li>
????????<li?onclick="setStyleType('001001','可爱',event);return false;">可爱</li>
????????<li onclick="setStyleType('001002','幽默',event);return false;">幽默</li>
????????<li onclick="setStyleType('001003','神秘',event);return false;">神秘</li>
????????<li onclick="setStyleType('007006','东方神起',event);return false;">东方神起</li>
????????<li onclick="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>

1 楼 softor 2011-12-13  
我遇到的问题是:

<ul id="dodo">
   <li class="current"><a>主页</a></li>
   <li><a>博客</a></li>
   <li><a>相册</a></li>
   <li><a>好友</a></li>
</ul>

给li加个onmouseover,子标签也会再次出发onmouseover。如何组织呢?
  相关解决方案