javascript - 停止特定处理程序的传播

Question

假设我有自定义 dropdown()。单击按钮时，我想调出菜单，当用户在菜单外单击时，我希望它关闭。所以我做了这样的事情:

$(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 元素，它就会立即被调用。

Answer 1

假设您有一个用于下拉菜单的选择器(假设为“.dropdown”)，我会尝试使用“.not()”

$('.dropdown').mousedown(dropDownMouseDown);

$("html").on('mousedown', htmlMouseDown);

function dropDownMouseDown(event) {
    event.target.open();
}

function htmlMouseDown(event) {
  $('.dropdown').not($(event.target)).close();
}

这是与 css 类具有相同想法的 fiddle : http://jsfiddle.net/eFEL6/4/