最近，在公司做專案時，發現在click中巢狀click事件，會發生多次呼叫的問題，經過查詢相關資料 ，特整理。文中有參考https://segmentfault.com/q/1010000000458432等。

HTML程式碼：

<div id="cover">
  <input type="button" id="inside" value="submit_inside" />
</div>
<div id="cover_js">
   <input type="button" id="inside_js" value="submit_inside_js" />
</div>
<input type="button" id="outside" value="submit_outside" />
 

JS程式碼：

$('#cover').mouseover(function () {
  $('#inside').click(function () {
    alert('multiple times');
  });    
});

$('#cover_js').mouseover(function () {
  document.getElementById('inside_js').onclick = function () {
    alert('just one time');
  }    
});

$('#outside').click(function () {
  alert('just one time');
});
 

隨後，本人又進行了原生js中addEventListener，發現不論是jQuery的事件（click，mouseover等），還是原生的addEventListener，或者原生的onclick，只要放在外層函式，而內層函式是jQuery的事件繫結，或者原生addEventListener,都會有事件累積的效應。但是如果內層函式是onlick，則不會有事件累積發生。 

以上是發現的規律，解決方法有：

1.unblind方法

$('#cover').mouseover(function () {
  $('#inside').unbind('click').click(function () {
    alert('multiple times');
  });    
});
 

2.儘可能不要使用事件巢狀，把事件拆出來

3.通過定義一個相反的外層事件解綁內嵌的事件

var foo = function () {
    alert('multiple times');
};

$('#cover').mouseover(function () {
    $('#inside').bind('click', foo);        
});

$('#cover').mouseout(function () {
    $('#inside').unbind('click', foo);
});

4.通過定義一個 flag 變數來阻止內嵌事件的累加

var flag = true;

var foo = function () {
    alert('multiple times');
};

$('#cover').mouseover(function () {
    if (flag) {
        $('#inside').bind('click', foo);
        flag = false;
    }
});

產生這種現象的原因（照搬過來了）：

1. 所有的事件繫結（.click, .mouseover, .hover 等等）都是委託給更底層的 .on 方法的，通過檢視其原始碼得知 .on 最終會呼叫 $.event.add 方法

2. 我沒有細細去看 $.event 物件的全部內容，只是看到這一行的時候，我似乎有些明悟了。

   1. jQuery 為每一個事件回撥函式生成一個 guid，保證它們都是獨一無二的（即使函式內容相同）

   2. 如果你繼續往後看，會發現這些回撥函式都被 push 到一個數組裡儲存，所以當時間觸發的時候，它們也應該是一個個從數組裡取出來再執行（或許是為了保證註冊在同一事件下不同回撥函式的執行順序，但是像你這樣內容一樣的回撥函式就不好判斷了，所以如果你不得不多次繫結內容一樣的回撥，先解綁）。這就是為什麼會產生你問題中效果的原因。

3. 至於 jQuery 為什麼要這樣去設計我還沒有去求證，我猜是為了更強大的事件管理能力，至於 bind after unbind 這樣的副作用也許在 jQuery Team 看來是微不足道的犧牲吧。