Question

我有两个功能可以打开和关闭sidenav。我添加了功能，当您点击外部导航时，您会触发功能closeNav()。 Sidenav已关闭，但事件点击仍然是整个document，因此我必须removeEventListener。我尝试了很多，但没有尝试有效。任何想法如何做到这一点？

JS

//  Show sidenav 
var sideNav = document.getElementById('rizkSidenav');

function openNav() {
    sideNav.style.width = "83%";

    // Close nav when clicked outside 
    document.addEventListener("click", function(evt) {  
        targetElement = evt.target;  // clicked element
        do {
            if (targetElement === sideNav) {
            // This is a click inside. Do nothing, just return.
                return;
            }
            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);
        // This is a click outside.
        closeNav();
    });
}

function closeNav() {
    sideNav.style.width = "0";
    //????? (event listener should be removed)
    document.removeEventListener("click", function(evt){});
}

Answer 1

因为它的功能不同。试试这个：

var sideNav = document.getElementById('rizkSidenav');

var myFunction = function(evt) {  
        targetElement = evt.target;  // clicked element
        do {
            if (targetElement === sideNav) {
            // This is a click inside. Do nothing, just return.
                return;
            }
            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while (targetElement);
        // This is a click outside.
        closeNav();
    }

function openNav() {
    sideNav.style.width = "83%";

    // Close nav when clicked outside 
    document.addEventListener("click", myFunction);
}

function closeNav() {
    sideNav.style.width = "0";
    //????? (event listener should be removed)
    document.removeEventListener("click", myFunction);
}

在JavaScript中删除事件单击

1 个答案: