删除 JavaScript 中的事件点击 [重复]答案

【问题标题】：Remove event click in JavaScript [duplicate]删除 JavaScript 中的事件点击 [重复]
【发布时间】：2018-08-10 18:50:08
【问题描述】：

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

//  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){});
}

【问题讨论】：

标签： javascript onclick dom-events onclicklistener

【解决方案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);
}

【讨论】：