下面是html代码
<ul class="dropdown">
<li>
<a href=''>A</a>
<ul>
<li><a href=''>1a</a></li>
<li><a href=''>1b</a></Li>
<li><a href=''>1c</a></li>
</ul>
</li>
<li>
<a href=''>B</a>
<ul>
<li><a href=''>2a</a></li>
<li><a href=''>2b</a></Li>
<li><a href=''>2c</a></li>
</ul>
</li>
<li>
<a href=''>C</a>
<ul>
<li><a href=''>3a</a></li>
<li><a href=''>3b</a></Li>
<li><a href=''>3c</a></li>
</ul>
</li>
</ul>
下面是js代码
$(document).on('click','ul.dropdown>li',function(){
var m = $(this).find('a').attr('href');
m = swithParamUseLimit(m);
console.log(m);
$(m).addClass('noob-sos-ao');
m = null;
});
$(document).on('click','ul.dropdown>li>ul>li',function(){
var m = $(this).find('a').attr('href');
m = swithParamUseLimit(m);
console.log(m);
$(m).addClass('noob-sos-ao');
});
但是当下面的js事件触发时,上面的事件也被触发了,何解,这样的怎么处理?
这个叫着事件冒泡(触发子元素事件的同时也会触发父元素的事件)
具体参考: http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
因此可以在下面的函数里添加一句 arguments[0].stopPropagation()
在这个 $(document).on('click','ul.dropdown>li>ul>li',function(){
事件里面加个 return false;
阻止事件冒泡方法
functon stopPropagation(event){
if(event.stoPropagation){
event.stoPropagation();
}else{
event.canceBubble = false;
}
}
这个是因为事件冒泡了,相当于两个事件都命中触发了,你可以参考一下上面的阻止事件冒泡的方法。