如何设置addEventListener绑定的hover事件仅触发一次？

场景1：每个.acfef-submit-button按钮各自可触发1次弹窗 #

这是最符合常规需求的实现方式，仅需要给mouseenter事件监听器添加原生的once配置即可，浏览器会在事件第一次触发后自动解绑该监听器，确保每个按钮的弹窗只会出现一次。
调整后代码如下：

document.addEventListener('DOMContentLoaded', function() {
    let elements = document.querySelectorAll( '.acfef-submit-button' );
    let popupposts = ['6033'];

    elements.forEach(function(e,i){
    // 仅新增了第三个参数 { once: true } 配置
    e.addEventListener( 'mouseenter', function(){
        elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
    }, { once: true } );
    });
});

once配置兼容所有现代浏览器（Chrome 55+、Firefox 50+、Edge 15+），如果需要兼容极低版本旧浏览器，可以直接用场景2的标记位写法，兼容性更强。

场景2：所有按钮加起来总共只触发1次弹窗 #

如果需求是不管hover多少个按钮，全局只弹出一次弹窗，可通过全局标记位控制触发逻辑，调整后代码如下：

document.addEventListener('DOMContentLoaded', function() {
    let elements = document.querySelectorAll( '.acfef-submit-button' );
    let popupposts = ['6033'];
    // 新增全局标记位记录弹窗是否已经触发过
    let hasPopupShown = false;

    elements.forEach(function(e,i){
    e.addEventListener( 'mouseenter', function(){
        // 弹窗已经触发过就直接终止逻辑
        if (hasPopupShown) return;
        elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
        // 触发后修改标记位，后续所有hover都不会再响应
        hasPopupShown = true;
    } );
    });
});

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