Javascript 停止特定处理程序的传播

假设我有自定义下拉列表（）。当点击按钮时，我想打开菜单，当用户在菜单外点击时，我想关闭菜单。所以我做了这样的事情：

$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(htmlMouseDown,myDropDown);
function dropDownMouseDown(event) {
    event.target.open();
    event.stopPropagation();//I need this line or else htmlMouseDown will be called immediately causing the dropDown-menu to close right before its opened
}
function htmlMouseDown() {
    this.close();
}

好吧，这很有效。但是如果我加上两个呢？如果我单击打开第一个，那么第二个上的同一个将被打开，因为dropDownMouseDown停止传播，因此htmlMouseDown永远不会被调用到第一个。 我该怎么做？ 如果我只有这两个，那么添加一些逻辑当然很容易，但是如果数量是动态的？另外，我可能不想调用event.stopPropagation（），因为它会对我正在使用的其他库执行奇怪的操作，这些库也会侦听该事件？ 我还试着说： $（“html”）.mousedown（htmlMouseDown，myDropDown）

---

在dropDownMouseDown处理程序中，但一旦冒泡到达html元素，它将立即被调用。

使用包含上次打开的变量怎么样？可能还有很多其他方法可以做到这一点，但我可以想到以下一种方法：

var lastOpened = null; // initially nothing is open (unless something is)

然后：

---

这应该以一种方式工作，即最后打开的一个总是在打开新的一个之前关闭自己。

假设您有一个用于放置的选择器，（比如“

.dropdown

”），我会尝试使用“

.not（）

”

这里有一个与css类相同的想法：

---

谢谢你的回答。他们真的很感激。我确实找到了一个我满意的方法。以下是方法：

$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(myDropDown,htmlMouseDown);//Pass in the dropDown as the data argument, which can then be accessed by doing event.data in the handler
function dropDownMouseDown(event) {
    event.target.open();
}
function htmlMouseDown(event) {
    if (event.target!=event.data)//event.target is the element that was clicked, event.data is set to the dropdown that this handler was added for. Unless these two elements are the same then we can...
        event.data.close();///close the dropdown this handler was added for
}

真不敢相信我没想到。在我的例子中，打开/关闭的元素有子元素，因此event.target可以是子元素之一，而不是处理程序附加到的元素。因此，我将html元素处理程序更改为：

    function htmlMouseDown(event) {
       var element=event.target;
        while (element) {
            if (element==event.data)
                return;
            element=element.parentElement;
        }
        event.data.hide();
    }

---

您在这里使用事件委派，捕获

html

元素上的每个事件。您可以在捕捉事件的位置“更具体”（仅在下拉列表中），或者–如果您想保留事件委派–您可以查看事件的目标，查看触发事件的元素。如果我使用的是reactjs（this.refs.el！=e.target）

$(myDropDown).mousedown(dropDownMouseDown);
$("html").mousedown(myDropDown,htmlMouseDown);//Pass in the dropDown as the data argument, which can then be accessed by doing event.data in the handler
function dropDownMouseDown(event) {
    event.target.open();
}
function htmlMouseDown(event) {
    if (event.target!=event.data)//event.target is the element that was clicked, event.data is set to the dropdown that this handler was added for. Unless these two elements are the same then we can...
        event.data.close();///close the dropdown this handler was added for
}

    function htmlMouseDown(event) {
       var element=event.target;
        while (element) {
            if (element==event.data)
                return;
            element=element.parentElement;
        }
        event.data.hide();
    }