transitionend事件监听无法通过removeEventListener移除，求排查原因

核心问题1：属性名匹配不兼容 #

不同浏览器对transitionend事件的e.propertyName返回格式可能不一致：有的返回短横线分隔的margin-left，有的返回驼峰式的marginLeft。你的判断条件if (e.propertyName !== 'margin-left') return;会导致部分场景下，移除监听器的代码根本不会执行，监听器就一直绑定在按钮上。

核心问题2：多属性过渡导致监听器残留 #

如果你的slide-out类同时过渡多个CSS属性（比如margin-left+opacity），transitionend会为每个完成的属性单独触发一次。只有margin-left对应的事件触发时才会执行移除逻辑，其他属性的事件触发时只会直接return，监听器不会被移除。

修复方案 #

方案1：兼容属性名匹配

修改判断逻辑，兼容两种格式的属性名：

for (const btn of buttons) {
    btn.addEventListener('transitionend', function func(e) {
        // 匹配margin-left或marginLeft，忽略大小写
        if (!/^margin-?left$/i.test(e.propertyName)) return;

        // ... do some stuff ...

        btn.removeEventListener('transitionend', func, false);
    }, false);
    btn.classList.add('slide-out');
}

方案2：使用自动移除的监听器（推荐）

利用现代浏览器支持的once配置项，让监听器执行一次后自动移除，无需手动调用removeEventListener：

for (const btn of buttons) {
    btn.addEventListener('transitionend', function(e) {
        if (!/^margin-?left$/i.test(e.propertyName)) return;
        // ... do some stuff ...
    }, { once: true }); // 配置once: true，自动移除监听器
    btn.classList.add('slide-out');
}

方案3：移除属性名判断（业务允许的话）

如果你的业务逻辑不需要区分具体过渡属性，只要按钮过渡完成就执行操作，直接去掉属性名判断，确保监听器一定会被移除：

for (const btn of buttons) {
    btn.addEventListener('transitionend', function func(e) {
        // ... do some stuff ...
        btn.removeEventListener('transitionend', func, false);
    }, false);
    btn.classList.add('slide-out');
}

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