問題描述
最近做一個項目葱轩，要給一個頁面在頂部新增一個入口屠阻，本以為是個超級簡單的事情宴树，結果發(fā)現(xiàn)用a標簽把點擊元素包裹起來無效策菜，給點擊元素綁定事件也無效，一件本以為簡單的事情酒贬，結果出了稀奇古怪的效果又憨。
問題排查
一般而言是不會有這個原因的，為什么給元素加了事件锭吨，點擊卻不觸發(fā)蠢莺？是事件沒綁定成功？在chrome里面的event listener里面檢查耐齐，發(fā)現(xiàn)有點擊事件浪秘。那么就是事件沒綁定了卻沒觸發(fā)。測試了一下埠况，發(fā)現(xiàn)點擊在子元素才不會觸發(fā)事件。我們都知道子元素是會繼承父元素的事件的棵癣。搜索了一下辕翰，終于找到鬼魁禍首 一個子元素的事件綁定中有 return false。
兩種事件流
根據(jù)事件的傳播順序不同狈谊，分為兩種事件流喜命。
冒泡型事件流：從子節(jié)點向根節(jié)點傳播。
捕獲型事件流：從父節(jié)點到子節(jié)點河劝。
現(xiàn)在我們使用的事件絕大多數(shù)都是冒泡型的壁榕，所有的現(xiàn)代瀏覽器都支持冒泡，一些老瀏覽器不支持捕獲赎瞎。
阻止事件繼承
1.為子元素添加和父元素一樣的事件牌里，然后在子元素中阻止事件冒泡。eg：
$("#child").on('click',function(e){
e.cancelBubble = true;//ie
e.stopPropagation(); //阻止事件冒泡
});
- 對于onmouseover 和mouseout 不能用上述方法來阻止事件冒泡，這個時候可以用 return false牡辽。eg：
function overOrOut(e,target){
if(e.type != "mouseover" && e.type != "mouseout"){
return false;
}
//do otherthing
}
return false也能阻止事件冒泡喳篇，但是它不僅阻止了事件冒泡也阻止了事件本身，相當于阻塞了該事件态辛，不再執(zhí)行麸澜。而e.stopPropagation()只是阻止事件冒泡。
tips：鏈接等是有默認事件的奏黑，阻止事件冒泡前需要先阻止事件的默認事件 event.preventDefault或window.event.returnValue=false炊邦。
