时间戳

首页 > 解决方案 > 删除事件侦听器无法正常工作

javascript - 删除事件侦听器无法正常工作

问题描述

我只是尝试将事件监听器和删除事件监听器添加到元素，但它没有删除。

我想问题可能出在参数上，但我用它们来跟踪 DRY。所以我可以简单地重用它，比如 nextSection.addEventListener('mouseover', showContent(event, nextSection)) 等等，所以我不需要任何 if 语句或类似的东西。

* 编辑 *

我做了一些我将要使用的元素的例子。有机会，会有更多的事件。如果我不使用参数，就会有更多的功能。另外，移动设备上会有点击而不是鼠标事件，所以我需要删除它们。

据我所知，问题出在 return 语句上。如果我使用事件而不是参数等 event.target 我得到一些奇怪的错误。

const loginSection = document.querySelector('#js-login-section');
const searchSection = document.querySelector('#js-search-section');
const shoppingBagSection = document.querySelector('#js-shopping-bag-section');
const wishlistSection = document.querySelector('#js-wishlist-section');

function showContent(element) {
    return () => {
        const toggle = element.lastElementChild;
        toggle.style.maxHeight = toggle.scrollHeight + 'px';
    }
}

function hideContent(element) {
    return () => {
        const toggle = element.lastElementChild;
        toggle.style.maxHeight = null;
    }
}

/* Media queries - min width 992px */
loginSection.addEventListener('mouseover', showContent(loginSection));
loginSection.addEventListener('mouseout', hideContent(loginSection));
searchSection.addEventListener('mouseover', showContent(searchSection));
searchSection.addEventListener('mouseout', hideContent(searchSection));
shoppingBagSection.addEventListener('mouseover', showContent(shoppingBagSection));
shoppingBagSection.addEventListener('mouseout', hideContent(shoppingBagSection));
wishlistSection.addEventListener('mouseover', showContent(wishlistSection));
wishlistSection.addEventListener('mouseout', hideContent(wishlistSection));

/* Media queries - max width 992px */
loginSection.removeEventListener('mouseover', showContent(loginSection));
loginSection.removeEventListener('mouseout', hideContent(loginSection));
searchSection.removeEventListener('mouseover', showContent(searchSection));
searchSection.removeEventListener('mouseout', hideContent(searchSection));
shoppingBagSection.removeEventListener('mouseover', showContent(shoppingBagSection));
shoppingBagSection.removeEventListener('mouseout', hideContent(shoppingBagSection));
wishlistSection.removeEventListener('mouseover', showContent(wishlistSection));
wishlistSection.removeEventListener('mouseout', hideContent(wishlistSection));

先感谢您！

标签： javascript

解决方案

发生的事情是return () => {};每次运行时都会返回一个新函数。因此，每次您调用其中一个函数时，都会创建一个新的事件处理程序。

这意味着添加的处理程序与您要删除的处理程序不同。

为了解决这个问题，我会保持简单：

const loginSection = document.querySelector('#js-login-section');

function showContent(e)
{
  const toggle = e.currentTarget.lastElementChild;
  toggle.style.maxHeight = toggle.scrollHeight + 'px';
}

function hideContent(e)
{
  const toggle = e.currentTarget.lastElementChild;
  toggle.style.maxHeight = null;
}

loginSection.addEventListener('mouseover', showContent);
loginSection.addEventListener('mouseout', hideContent);

loginSection.removeEventListener('mouseover', showContent);
loginSection.removeEventListener('mouseout', hideContent);

我不确定你想避免重复什么，所以我不能就此提出建议，但我相信你会弄清楚的。

推荐阅读