javascript - 使用 onclick 和 eventlistener 关闭菜单的问题

Question

我在使用 mouseup 事件时关闭菜单时遇到问题。当您在下拉菜单外单击时，我希望菜单关闭，效果很好。但是当我单击列表元素本身时，菜单一旦打开就不会消失。当您在元素外部单击以及单击列表项时，我希望菜单消失。

代码在这里: http://jsfiddle.net/6132jg9m/2/

    var dropDownContent = document.querySelector(".drop-down-content");
    var dropDownTrigger = document.querySelector(".drop-down");

    dropDownTrigger.onclick = function () {
        dropDownTrigger.classList.toggle("active");

        document.addEventListener('mouseup', clickedOutside);
    };

    function clickedOutside(e) {
        if (e.target != dropDownContent &&
            e.target.parentNode != dropDownContent) {
            dropDownTrigger.classList.remove("active");
        }
    }

Answer 1

首先，不要在第一个点击事件中增加事件监听。其次，您必须设置在未悬停菜单元素时执行的文档点击事件。

这是您的脚本，使用“匹配”方法稍作修改:

    var dropDownTrigger = document.querySelector(".drop-down");

    dropDownTrigger.addEventListener('click', function() {
        dropDownTrigger.classList.toggle("active");
    });

    document.addEventListener('mouseup', function() {
        if (!dropDownTrigger.matches(':hover')) {
            dropDownTrigger.classList.remove("active");
        }
    });

https://developer.mozilla.org/en-US/docs/Web/API/Element/matches