本文共 917 字，大约阅读时间需要 3 分钟。

前言 –引入问题

在开发过程中我们总会不经意间把一个事件嵌套到另一个事件中，其实这是很危险的，BUG会一个接一个的来，而且如果你不了解事件嵌套与绑定的原理，那么就很难发现问题的所在之处，因为按照正常思维来说，这是可行的，而且程序逻辑不会有什么问题。那么到底是什么导致了事件嵌套出现了问题呢？

事件嵌套与绑定

先来一个简单的程序模型来认识一下事件的嵌套和绑定：

以上就是一个简单的事件绑定和事件嵌套的模型，Btn2嵌套在Btn1中，按照正常逻辑就是这样写的啊，比如：我在Btn1点击之后弹出来一个会话框，Btn2存在于这个会话框中，逻辑就是:我只有点击了Btn1之后才能去点击Btn2，所以我要把处理点击Btn2的程序放在Btn1事件里面，这样想是没错的！但是，这也给我们带来了很多BUG，比如，最基本的BUG，按照上面的格式写的话，当你点击一下Btn1一次的时候，再去点击Btn2，Btn2里面的程序执行一次，再点击一次Btn1，然后再点击Btn2，Btn2里面的程序会执行两次，于是你就会发现，你点击几次Btn1，接着你只要触发Btn2的点击事件，Btn2它里面的程序就会执行几次。这冥冥中好像有个计数器在记录我点击了几次Btn1，而且会让Btn2里面的程序的执行次数等于我点击Btn1的次数。通过谷歌浏览器打断点调试，确实是验证了这一个现象，就像是在Btn2点击事件外面加了一个循环一样，只不过这个循环次数就等于我点击Btn1的次数，这实在是让人捉急!

解决方案 1

那么怎么去解决这种BUG呢?其实我们知道，每个事件都是可以独立的，我们可以把Btn2的事件绑定写在Btn1事件绑定的外面，这样你每次不管点击几次Btn1都会再给Btn2绑定多次click事件了！

解决方案 2

在jQuery中，有一个对事件绑定的方法unbind(),就是可以帮多绑定的事件全局解除掉，这样就不会因为Btn1的多次点击而带来BUG了。

但是还是不推荐使用解绑的方法，请大家牢牢记住，事件与事件不要嵌套，都当做一个个整体给独立出来，这样就不会出现错误了。也不用担心独立出来会被无意中执行了，放心吧，用户不去主动触发事件，事件绑定的代码是不会执行的！

转载地址：https://blog.csdn.net/weixin_40612082/article/details/80487560 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！