踩了一个在body上添加多个代理事件的坑

今天要实现这么个效果,页面上有个按钮,有一个弹出层A,A默认是隐藏的。

我需要点击按钮弹出A,然后再次点击按钮的时候关闭A。

按钮初始有一个类名a,点击后类名变为b,于是给body搞了两个代理,一个是代理.a并让A弹出来,一个是代理.b让B关闭。

ok,代码写好,测试发现点击按钮怎么点都没反应,在看class确实点击后就由a变为b了,诡异了。。。于是面壁了N久,想了下代理的执行过程,

终于我想通了,当body上的click事件触发后,首先找类名为a的元素,并执行为a添加的事件,再找类名为b的元素,并执行为b添加的事件,所以由于执行为a添加的事件过程中把类名a改成了b,所以再去找b的时候就依然能找到我们的按钮。

不知道我们的框架这么设计是否合理,是否应该在代理事件触发后立即把每个代理需要代理的元素都先筛选出来,而不是先筛选第一个代理的元素,执行代理方法,再去筛选第二个代理的元素。

说得不太清楚,仅仅放在这里做个记录

原文地址:https://www.cnblogs.com/libmw/p/2650926.html