前兩天做了一個點擊任意位置，都能關閉菜單的功能，因為菜單里面的每一個a,的點擊事件都是用on綁定的。所以在阻止冒泡的時候不管用，今天特意來理解一下on的機制
on 是委托事件，利用的就是冒泡原理
$(selector).on(event,[selector],handler);
selector 如果為空，表示的就是目標元素就是所選元素，如果有值代表的是符合所選元素的所有后代元素
實際上，事件委托的事件處理函數是當被委托的元素上的事件觸發時判斷e.target后執行，而不是目標元素上的事件被觸發后就立即執行，在沒有阻止冒泡的情況下，事件還是一層層傳播的，只是處理函數在事件到達那一層被觸發的問題。根據事件代理的規則，點擊li元素后，click事件是從li至ul至ul父元素一層層冒泡上去的，沿途觸發各個元素上的事件處理函數。如果我們將事件委托在ul上，調用了stopPropagation，就阻止了事件從ul繼續向上冒泡，而不是阻止事件從li向上冒泡。這樣從ul開始，ul及其祖先元素上的事件冒泡被阻止。
重要說明：
如果傳遞了selector參數，那么on()函數並不是為當前jQuery對象匹配的元素綁定事件處理函數，而是為它們的后代元素中符合選擇器selector參數的元素綁定事件處理函數。on()函數並不是直接為這些后代元素挨個綁定事件，而是委托給當前jQuery對象的匹配元素來處理。由於DOM 2級的事件流機制，當后代元素selector觸發事件時，該事件會在事件冒泡中傳遞給其所有的祖輩元素，當事件流傳遞到當前匹配元素時，jQuery會判斷是哪個后代元素觸發了事件，如果該元素符合選擇器selector，jQuery就會捕獲該事件，從而執行綁定的事件處理函數。
通俗易懂地說，如果我們希望給頁面上所有的<P>標簽綁定click事件處理函數，我們可以在每個P標簽上直接分別綁定click事件處理函數。例如：
// 為所有P元素分別綁定click事件處理函數handler
$("p").on("click", handler);
我們也可以在這些P標簽的任意一個公共祖輩元素上綁定事件委托機制，利用DOM的事件冒泡機制來統一委托處理。當我們觸發了某個元素的click事件，JS會依次通知該元素及其"父輩"元素、"爺爺輩"元素……直到最頂部的document對象為止，如果這些元素上綁定了click事件處理函數就會依次執行。
// 在body元素上綁定click事件處理函數handler，如果這個click事件是由其后代的P元素觸發的，就執行handler
$(document.body).on("click", "p", handler);
在這里的示例中，事件委托機制就是，我們不為每個P元素直接綁定click事件處理函數，而是委托給其某個公共的祖輩元素(此處示例中為document.body)，"告訴"他：如果接收到了click事件觸發通知，並且這個click事件是由我們這些P元素其中之一觸發的，就執行祖輩元素上委托綁定的事件處理函數。
如果在后代元素中阻止了冒泡，他就不會傳遞到祖輩，
直接在后代中為每個后代元素執行事件和函數
例子
$("ul").on('click',function(){
console.log('我是父級ul');
})
$('ul').on('click','li',function(e){
e.stopPaptration();//為了不讓點擊li 使得他們的父級的事件也觸發了，就阻止冒泡，這樣就只為所有的li 執行事件，不會再執行到ul上去
cnosole.log($(this).text());//當前被點擊的那個li
})
如果是實現點擊任意地方關閉的話，要這樣寫
$(document).on('click','li',function(e){
e.stopPaptration(); //阻止冒泡
})
這樣之后點擊li元素本身的話，他不會冒泡到document上。也就不會關閉 li .
$(document).on('click',function(){
$('li').hide();
})