javascript - 函数在点击事件之前启动

Question

我的问题是为什么它里面closeButton()有一个事件，这个事件发生在第一个匿名函数被点击时。clickclick

有什么办法可以防止这种行为？我的目标是click第二个函数上的事件仅在第二次单击后发生，如果我单击searchToggler它会调用该函数，并且当我单击任何位置时它会调用第二个click函数。

const searchToggler = document.querySelector(".search-toggler");
const searchWrapper = document.querySelector(".search-wrapper");
const searchImage = document.querySelector(".search-icon");


searchToggler.addEventListener("click", function () {
    searchWrapper.classList.toggle("search-wrapper-active");
    searchImage.classList.toggle("search-active");

    closeButton();

    function closeButton() {
        $(document).click(function (e) {
            console.log(e.target);
        })
    }
}

标签： javascriptonclicklistener

Answer 1

将closeClick()函数放在外面，因为它只需要创建一次。然后在需要时添加/删除事件侦听器：

searchToggler.addEventListener("click", function () {
    searchWrapper.classList.toggle("search-wrapper-active");
    searchImage.classList.toggle("search-active");
    
    // Add to window instead with an event listener after a timeout, to prevent click from firing immediately
    setTimeout(function() {
        window.addEventListener('click', closeClick);
    }, 100);
}

function closeClick(e) {
    console.log(e.target);

    // Remove it again if needed
    window.removeEventListener('click', closeClick);
}