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