jQuery 嵌套 event 会触发多次的原因
2021-06-18 03:05
标签：java eve 鼠标 jquery代码 sub dev div bind doc Html代码如下： jQuery代码如下： id 为 inside 的按钮的 click 事件被嵌套在 div 的鼠标事件内，而 id 为 outside 的按钮则未嵌套，分别对两个按钮进行多次点击后，inside 按钮绑定的 click 事件会进行累加，而 outside 按钮则仍旧只绑定一个 click 事件。id 为 inside_js 的按钮的 click 事件也被嵌套在 div 的鼠标事件内，但是我用 javascript 实现 click，此时点击多次后，只触发一个 alert。 原因： jQuery所有的事件（ 代码每次mouseover的时候就多绑定了一次事件回调。 jQuery 嵌套 event 会触发多次的原因 标签：java eve 鼠标 jquery代码 sub dev div bind doc 原文地址：http://www.cnblogs.com/gxp69/p/7262679.htmldiv 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" />
$(‘#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‘);
});
解决上述问题可以用 unbind 对嵌套 event 进行解绑：$(‘#cover‘).mouseover(function () {
$(‘#inside‘).off.(‘click‘).click(function () {
alert(‘multiple times‘);
});
});
.click, .mouseover, .hover 等等）都是通过on => event.add => addEventListener，来实现的。
原生的onclick每次赋值都直接覆盖了之前的onclick绑定，所以不推荐这样写。
若是用原生的addEventListener也会得到跟jQuery一样的结果。