带有元素移除的Javascript remove-click事件

Javascript remove click event with element removal

本文关键字：Javascript remove-click 事件 元素      更新时间：2023-09-26

我有一个div（一条消息），当页面加载时，它会出现在页面上。当用户单击此消息之外的某个页面时，我希望此消息消失，并在控制台中显示（ONCE）该消息已消失的日志。问题是，每次我点击页面上的任何地方时，我都会继续收到控制台消息，尽管消息已经不见了。也就是说，我无法将"点击"事件从页面中分离。代码如下：

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")
    });
  }
}

如有任何帮助，我们将不胜感激。

编辑_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
                }
              });
            }

这个代码对非常有用

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

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

一个元素可以有许多单击处理程序，因此需要指定要删除的单击处理程序。

相关文章：