removeEventListener未定义引用

removeEventListener undefined reference

本文关键字：引用 未定义 removeEventListener      更新时间：2024-01-09

我正在创建一个大的div网格，我计划在上面执行动画和效果。我有大约90个div来创建平铺的背景。下面是这个的诀窍。。我正在创建响应页面。我不能浮动这些div，所以它们被内联阻塞，并隐藏溢出。因此，随着视口宽度的变化，行中div的数量也会发生变化——本质上是上下移动div。因此，我不得不根据位置（x，y）动态填充div文本。不幸的是，我在事件侦听器框移动时遇到了问题。

当我试图删除事件侦听器时，我会得到一个未定义的错误——即使我将其移动到初始侦听器范围中也是如此。

        function menuBox(){
    var allDiv = document.getElementsByTagName('div');
    var menuDiv1 = document.elementFromPoint(39, 16);
    var menuDiv2 = document.elementFromPoint(39, 120); //Blank Div
    var menuDiv3 = document.elementFromPoint(39, 225);
    var menuDiv4 = document.elementFromPoint(39, 329);
    var menuDiv5 = document.elementFromPoint(39, 433);
    var menuDiv6 = document.elementFromPoint(39, 538);
    var menuDiv7 = document.elementFromPoint(39, 642);
    var menuDiv = [
        menuDiv1,
        menuDiv3,
        menuDiv4,
        menuDiv5,
        menuDiv6,
        menuDiv7
    ]
    for (var i = 0; i < allDiv.length; i++) {
        allDiv[i].innerHTML = '';
        // allDiv[i].removeEventListener("mouseover", menuOver, false);
        // allDiv[i].removeEventListener("mouseout", menuOut, false);
    };
    for (var i = 0; i < menuDiv.length; i++) {
        menuDiv[i].addEventListener("mouseover", function menuOver(){
            TweenLite.to(this, 0.4, {backgroundColor: '#272822', color: '#fff', scale: 1.1})
        }, false);
        menuDiv[i].addEventListener("mouseout", function menuOut(){
            TweenLite.to(this, 0.3, {backgroundColor: '#fff', color: '#000', scale: 1})
        }, false);
    };
    menuDiv1.innerHTML = '<p>Switch<br>Menu</p>';
    menuDiv3.innerHTML = '<p>Michael</p>';
    menuDiv4.innerHTML = '<p>Design</p>';
    menuDiv5.innerHTML = '<p>Develop</p>';
    menuDiv6.innerHTML = '<p>Imaging</p>';
    menuDiv7.innerHTML = '<p>Motion</p>';
    console.log('menuBox function');
};
menuBox();
window.onresize = menuBox;

您应该知道，要从DOM元素中删除事件处理程序，用addEventListener()方法指定的函数必须是外部函数。像domelement.removeEventListener("event", function(){ ''something });这样的匿名函数将不起作用。

话虽如此，在您的代码中也出现了同样的错误，从而导致引用类型的错误Uncaught ReferenceError: menuOver is not defined。为了让你的代码工作，以下是你应该使用的更改：

for (var i = 0; i < allDiv.length; i++) {
   allDiv[i].innerHTML = '';
   allDiv[i].removeEventListener("mouseover", menuOver, false);
   allDiv[i].removeEventListener("mouseout", menuOut, false);
};
for (var i = 0; i < menuDiv.length; i++) {
   menuDiv[i].addEventListener("mouseover",menuOver, false);
   menuDiv[i].addEventListener("mouseout",menuOut, false);
};
function menuOver(){
  TweenLite.to(this, 0.4, {backgroundColor: '#272822', color: '#fff', scale: 1.1});
}
function menuOut(){
  TweenLite.to(this, 0.3, {backgroundColor: '#fff', color: '#000', scale: 1});
}
相关文章：