addEventListener 悬停但只触发一次？

Question

我有一些代码在悬停在 .acfef-submit-button 元素上时显示弹出窗口。但是，我只希望这种情况发生一次。如何调整此代码以仅允许弹出窗口出现一次？

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

    elements.forEach(function(e,i){
    e.addEventListener( 'mouseenter', function(){
        elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
    } );
    });
});

Answer 1

有点老套，但设置一个 viewed 布尔值就可以了。

document.addEventListener('DOMContentLoaded', function () {
    let elements = document.querySelectorAll('.acfef-submit-button');
    let popupposts = ['6033'];
    let viewed = false; // or set this in the first loop if you need to

    elements.forEach(function (e, i) {
        e.addEventListener('mouseenter', function () {
            if (viewed === false) {
                elementorProFrontend.modules.popup.showPopup({ id: popupposts[i] });
                viewed = true;
            }
        });
    });
});

Answer 2

函数后添加一个选项对象{once: true}

Answer 3

使用 {once: true} 使函数运行只执行一次 :

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

    elements.forEach(function(e,i){
    e.addEventListener( 'mouseenter', function(){
        elementorProFrontend.modules.popup.showPopup( { id: popupposts[i] } );
    } );
    });
}, {once: true});

addEventListener 悬停但只触发一次？

addEventListener on hover but only trigger once?

html

javascript

elementor