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

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 会触发多次的原因

原文地址:http://www.cnblogs.com/gxp69/p/7262679.html


最新回复(0)
/jishuQiN5JX0VVCO4an5_2FywJK3tRiCCePkKX_2F6KxJMg_3D_3D4719332
8 简首页