jQuery 嵌套 event 会触发多次的原因

Posted 2020-09-30 Jade_g

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一样的结果。