有天,同事問我,有一個(gè)div層'out',內(nèi)含有一個(gè)div層'in'。如下:
兩個(gè)層都綁定了點(diǎn)擊事件,但是點(diǎn)擊in層的時(shí)候,同時(shí)也會(huì)觸發(fā)out層的點(diǎn)擊事件。但是他并不希望觸發(fā)out的點(diǎn)擊事件,只希望觸發(fā)in層的點(diǎn)擊事件,問我怎么處理。頁(yè)面代碼:
<div style="width: 400px;height: 400px;background-color: #678678;font:3em bold;" id="outDiv"> out <div style="width: 200px;height: 200px;margin: 50px;background-color: #eaceac;font:1em bold;" id="inDiv">in</div> </div>
關(guān)于如何取消事件冒泡的方法。才算是比較靠譜的解決了這個(gè)問題,代碼如下:
inDiv.addEventListener('click',function(e){ alert('in'); e.stopPropagation();//終止事件冒泡 },false); outDiv.addEventListener('click',function(e){ alert('out'); },false);
另外outclick 點(diǎn)擊div外部觸發(fā)事件
$(".div").click(function(event){
event=event||window.event;
event.stopPropagation();
});
//點(diǎn)擊層外,隱藏這個(gè)層。由于層內(nèi)的事件停止了冒泡,所以不會(huì)觸發(fā)這個(gè)事件
$(document).click(function(e){
$(".div").hide();
});
如對(duì)本文有疑問,請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答??! 點(diǎn)擊進(jìn)入論壇