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" />

jQuery代碼如下：

$(‘#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‘);
});

id 為 inside 的按鈕的 click 事件被嵌套在 div 的鼠標事件內，而 id 為 outside 的按鈕則未嵌套，分別對兩個按鈕進行多次點擊後，inside 按鈕綁定的 click 事件會進行累加，而 outside 按鈕則仍舊只綁定一個 click 事件。id 為 inside_js 的按鈕的 click 事件也被嵌套在 div 的鼠標事件內，但是我用 javascript 實現 click，此時點擊多次後，只觸發一個 alert。
解決上述問題可以用 unbind 對嵌套 event 進行解綁：

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

原因：

jQuery所有的事件（.click, .mouseover, .hover 等等）都是通過on => event.add => addEventListener，來實現的。

代碼每次mouseover的時候就多綁定了一次事件回調。
原生的onclick每次賦值都直接覆蓋了之前的onclick綁定，所以不推薦這樣寫。
若是用原生的addEventListener也會得到跟jQuery一樣的結果。

jQuery 嵌套 event 會觸發多次的原因