筛选列表重新渲染后,按钮点击为什么执行了两次?
每次切换筛选条件后,收藏按钮都会多触发一次。通过检查监听器绑定位置,区分重复注册与事件冒泡,并整理列表交互的验证步骤。
触发次数随筛选次数增加
我做了一个纯前端作品列表,第一次点击收藏只执行一次,切换筛选后再点击会执行两次,再切换一次就变成三次。控制台没有报错,按钮本身也没有重复出现。因为次数与筛选操作有关,我怀疑是重新渲染时的初始化逻辑,而不是用户真的连续点击。
先区分冒泡和重复注册
我给处理函数加入了触发位置与目标元素的记录,发现每次都是同一个父容器的同一段逻辑执行。原来渲染函数每次都向仍然存在的父容器添加一个新的匿名监听器。阻止冒泡没有消除这些监听器,所以不能靠它修复重复执行,也不应该因此破坏其他正常交互。
把事件绑定移到稳定的初始化阶段
现在父容器只在初始化时绑定一次监听器,渲染函数只更新列表内容。处理点击时先查找对应按钮,再确认它属于当前列表;点击图标和按钮文字都能走同一路径。如果页面存在卸载与重新挂载,还需要明确清理监听器的时机,最后连续切换筛选并重复操作确认次数始终正确。