Javascript удалить событие click с удалением элемента

Question

У меня есть 1 div (сообщение), которое появляется на странице при загрузке страницы. Когда пользователь щелкает где-то на странице вне этого сообщения, я хочу, чтобы это сообщение исчезло и показ (ONCE) журнала в консоли, что сообщение исчезло. Проблема в том, что я продолжаю получать сообщения консоли каждый раз, когда я нажимаю на всю страницу на своей странице, хотя сообщение уже исчезло. И.Е. Я не могу отсоединить событие «click» с моей страницы. Код выглядит следующим образом:

var elems = document.querySelectorAll(':not(#my-widget)'); //all elements in my page except message 
var promptwidget = document.getElementById('my-widget'); 
console.log('WIDGET==> ' + promptwidget); 
if (typeof(promptwidget) != 'undefined' && promptwidget != 'null') { 
    for (var i = 0; i < elems.length; i++) //add click eventlistener to the rest document 
    { 
    elems[i].addEventListener("click", function(e) { 
     e.preventDefault(), 
     removeWidget(["my-widget"]), //parentNode.removeChild wrapper, works OK 
     console.log('widget removed'), //received everytime I click on a page but I need only ONCE 
     promptwidget = document.getElementById('my-widget'); //tried to reassign a null value to my promptwidget var and call removeEventListener but no work 
    }); 
    } 
} else //this code never called, but I want it after my-widget removal 
{ 
    for (var i = 0; i < elems.length; i++) { 
    elems[i].removeEventListener("click", function(e) { 
     e.preventDefault(), 
     console.log("clickevent removed") 
    }); 
    } 
} 

Любая помощь будет принята с благодарностью.

EDIT_1: Спасибо всем, проблема была решена следующим образом:

var elems = document.querySelectorAll(':not(#my-widget)'); 
var promptwidget = document.getElementById('my-widget'); 
for(var i = 0; i<elems.length; i++) 
      { 
       elems[i].addEventListener("click", function(e) 
       { 
       e.preventDefault(); 
       if(typeof(promptwidget) != 'undefined' && promptwidget != null) 
       { 
        removeWidget(["my-widget"]), 
        console.log('widget removed'), //now showed once 
        promptwidget = undefined 
       } 
       }); 
      } 

This код был очень полезным

Answer 1

Это не имеет смысла, чтобы передать вновь объявленную анонимные функции, как 2-й параметр removeEventListener. Вам нужно передать ссылку на фактическую функцию, которую нужно удалить. Вам нужно будет определить эту функцию с именем за пределами области действия, а затем вы можете использовать это имя в качестве ссылки для его удаления.

function removeWidgetFn (e) { 
    e.preventDefault(), 
    removeWidget(["my-widget"]), 
    console.log('widget removed'), 
    promptwidget = document.getElementById('my-widget'); 
}); 

А потом,

elems[i].addEventListener("click", removeWidgetFn); 

А потом,

elems[i].removeEventListener("click", removeWidgetFn); 

Элемент может иметь множество обработчиков кликов, поэтому вам нужно указать, какой обработчик нажмите вы хотите удалить.

Answer 2

addEventListener позволяет указать более одного обработчика событий для каждого типа событий, так чтобы удалить конкретный обработчик событий, который Вы должны указать не только тип события, но и какой обработчик вы хотите удалить:

addEventListener(eventType, eventHandler); 
removeEventListener(eventType, eventHandler); 
// arguments passed to removeEventListener must be exactly the same 
// as in addEventListener so you cannot pass an anonymous function