Question

我正在创建一个大型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;

Answer 1

您应该知道，要从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});
}

removeEventListener未定义的引用

1 个答案: