Jasmine测试中affix元素事件重复触发及持久化问题咨询

核心本质原因 #

你用到的$(document).on是事件委托绑定，监听函数是挂载在全局document对象上，而非绑定到.test元素本身，这是所有问题的根源。

问题1解答 #

jasmine-fixture的affix清理逻辑仅会删除每个用例结束后自行插入的DOM节点，完全不会触碰你绑定在document上的事件监听。
你在第二个describe块的beforeEach里调用mountTest后，这个绑定到document的事件监听会一直存在于整个测试运行的生命周期中。后续3、4号用例只要新插入了带.test类的元素，点击事件冒泡到document时就会匹配到选择器触发之前绑定的逻辑，所以点击依然能生效。

问题2解答 #

顶层beforeEach每次执行调用mountTest时，都是给全局document新增了一次完全相同的事件监听，并不是绑定到新生成的affix元素上。
$(document).on('click', '.test', 处理函数)的执行逻辑是：把处理函数存入document的事件监听队列，每次有点击事件冒泡到document时，才会校验触发事件的元素是否匹配.test选择器，匹配就执行一次对应的处理函数。运行到第N个用例时document上已经累计挂载了N个相同的处理函数，点击自然会触发N次。
你手动删除.test元素无法解决问题的原因也在这里：事件绑定根本不在这些临时DOM元素上，删除元素对document上已经存在的监听完全没有影响。

可行修复方案 #

• 调整事件绑定逻辑，直接将点击事件绑定到你生成的.test元素实例上，不要使用全局document委托，这样affix清理DOM时绑定的事件会跟着元素一同被销毁
• 在调用mountTest的对应层级新增afterEach，手动清理委托事件：$(document).off('click', '.test')，避免事件累计
• 如果事件逻辑全局通用，可以将mountTest放在仅执行一次的beforeAll钩子中，避免重复绑定

内容的提问来源于stack exchange，提问作者james