jquery 各种情况下的事件叠加问题

2018-07-25

字数统计: 1.4k字 | 阅读时长≈ 6分

事件叠加指的是同一个事件（比如 click）被注册（或绑定）了多次，导致触发事件的时候触发了多次。

举例如下：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<button class="me">点我</button>
<script>
$('.me').click(function() {
    alert(1);
});
$('.me').click(function() {
    alert(1);
});
</script>

上方代码点击按钮时会弹出两次1，该例子就是事件叠加。

事件叠加发生的情况

正常开发我们都不会写出像上面一样的代码，但是很多的事件叠加都是在我们不经意间写出来的，尤其发生在，在调用的方法内注册事件

比如：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<button class="me">点我</button>
<script>
function start() {
    $('.me').click(function() {
        alert(1);
    });
}
start();
start();
</script>

上面这份代码说明了这样子调用也会被注册两次。

jquery on 下导致的事件叠加

如果说上面的写法你也不会出现，那么这个写法你可能写过。

比如：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<button onclick="showButton()">显示</button>
<button onclick="hideButton()">隐藏</button>
<div class="container"></div>
<script>
function showButton() {
    // 将按钮添加到页面上
    $('.container').html('<button class="me">点我</button>');
    // 由于是动态增加的按钮，所以要用 on 来绑定动态事件
    $('.container').on('click', '.me', function() {
        alert(1);
    });
}
function hideButton() {
    // 将按钮删除
    $('.container').html('');
}
</script>

上面的例子进行如下操作就会产生事件叠加：

点击显示->点击点我(弹出1)->点击隐藏->点击显示->点击点我(弹出两次1)

上面的例子错误的解决方案可以是：

将点击事件的注册放到方法外部（推荐）

<script>
function showButton() {
    // 将按钮添加到页面上
    $('.container').html('<button class="me">点我</button>');
}
function hideButton() {
    // 将按钮删除
    $('.container').html('');
}
// 由于是动态增加的按钮，所以要用 on 来绑定动态事件
$('.container').on('click', '.me', function() {
    alert(1);
});
</script>

在隐藏的时候把事件解绑掉

<script>
function showButton() {
    // 将按钮添加到页面上
    $('.container').html('<button class="me">点我</button>');
    // 由于是动态增加的按钮，所以要用 on 来绑定动态事件
    $('.container').on('click', '.me', function() {
        alert(1);
    });
}
function hideButton() {
    // 将按钮删除
    $('.container').html('');
    // 解绑原事件
    $('.container').off('click', '.me');
}
</script>

iframe 下不经意的事件叠加

有时候我们在操作 iframe 时，经常需要操作父页面的js，来达到类似全局方法，或者页面离开但方法继续的需求

这就经常会导致意想不到和难以排查的事件叠加

比如：

<!-- iframe 父页面:main.html -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<iframe name="my-iframe" src="a.html"></iframe>
<a href="a.html" target="my-iframe">a页面</a>
<a href="b.html" target="my-iframe">b页面</a>
<div class="modal" style="display:none;">我是弹出框</div>
<!-- iframe 子页面1:a.html -->
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<button onclick="showModal()">显示</button>
<script>
function showModal() {
    var html = '我是页面1' +
        '<button class="save">保存</button>';
    $('.modal', window.parent.document).html(html).show();
}
// 由于是动态增加的按钮，所以要用 on 来绑定动态事件
$('.modal', window.parent.document).on('click', '.save', function() {
    alert(1);
});
</script>
<!-- iframe 子页面2:b.html -->
<!-- B 页面什么都不用处理 -->
</script>

上面的代码出现事件叠加的操作如下：

iframe默认显示a.html->点击b链接->显示b页面->点击a链接->显示a页面->点击显示->显示保存按钮->点击保存->弹出两次1

简化触发的流程就是进入了两次 a.html ，触发了两次 save 的事件绑定，即

1
2
3

$('.modal', window.parent.document).on('click', '.save', function() {
    alert(1);
});

这段代码执行了两次。

那么解决这个问题我们使用先解绑再绑定的方式是不是能解决呢？比如下方代码：

1
2
3

$('.modal', window.parent.document).off('click', '.save').on('click', '.save', function() {
    alert(1);
});

答案是不能

正确的解决方案，使用父页面的 jquery 对象来注册事件，即：

1
2
3

window.parent.$('.modal').off('click', '.save').on('click', '.save', function() {
    alert(1);
});

这段代码（正确的）和上一段的代码（错误的）区别在于错误的使用的是子页面的 $，然后通过 window.parent.document 来定义作用域为父页面，正确的使用的 window.parent.$。

$(‘.modal’, window.parent.document)

代表从子页面开始，jquery 对象用的是本页面的，向上（父页面）查找 class 是 modal 的元素，事件是绑定到当前页面的 jquery 对象上的。

window.parent.$(‘.modal’)

代表从父页面开始，jquery 对象用的是父页面的，查找 class 是 modal 的元素，事件绑定是绑定到父页面的 jquery 对象上的。

这两者实质上是不一样的，a.html 子页面每加载一次就会产生一个新的 jquery 对象，所以使用 $('.modal', window.parent.document) 去 off 一个事件是找不到上一个页面 on 出来的事件的。

jquery 查看元素绑定的事件的方法

1	$._data($('body', window.top.document)[0],'events');

本文作者： kriss
本文链接： http://www.kriss.pub/2018/07/25/jquery-on-off/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！