Question

我有1个div（一条消息），当页面加载时会显示在页面上。当用户点击此消息之外的页面上某处时，我希望此消息消失，并在控制台中显示（ONCE）消息已消失的日志。问题是我每次点击页面上的任何地方时都会继续接收我的控制台消息，尽管消息已经消失。 I.E.我无法分离＆＃39;点击＆＃39;来自我页面的活动。代码如下：

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

将新声明的匿名函数作为第二个参数传递给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

Javascript删除了元素删除的点击事件

2 个答案: