我正在尝试制作一个小菜单，当您单击它时打开，当您单击它外部时关闭。我设法做到了，大部分。我按下打开菜单的按钮有一些填充，当我专门单击填充时，打开的菜单选择了所有文本，这很奇怪，我不明白为什么会发生这种情况。我已经浏览了MDN的文档，我最喜欢的搜索引擎和IRC(freenode)寻找解决方案，但到目前为止还没有运气。
我做了一个最小的工作示例，我在底部链接到它，我添加了一些关于一些可以评论以更改行为的行的评论。简单地说，您可以按蓝色方块，字母"a"将显示为选中状态，预期的行为是字母"a"应该显示，但未选中。如果您了解正在发生的事情，请告诉我。^_^
编辑：我看到一些关于不同浏览器上不同结果的讨论。我目前在Linux(Fedora 27)上使用Firefox 59.0.1 64位。有人建议这可能是一个错误，我不能排除。
https://jsfiddle.net/16k672tt/4/
function outside_function(event) {
var outside = event.target;
outside.classList.remove("outside");
var menu_list = document.getElementById("menu-list");
menu_list.classList.remove("menu-list-open");
event.stopPropagation();
}
var outside = document.getElementById("outside");
outside.addEventListener("click", outside_function);
function menu_click_event(event) {
var menu_list = document.getElementById("menu-list");
var outside = document.getElementById("outside");
menu_list.classList.add("menu-list-open");
outside.classList.add("outside");
event.stopPropagation();
}
var menu = document.getElementById("menu");
menu.addEventListener("click", menu_click_event);.menu {
/* If you comment the next line, it renders the way I expect */
display: flex;
width: 2.5rem;
height: 2.5rem;
background-color: #0000ff80;
}
.outside {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-list {
display: none;
}
.menu-list-open {
display: block;
/* If you comment the next line, it renders the way I expect */
/* In fact if you decrease the alpha value to 0 it works as well (#ffffff00) */
background-color: #ffffffc0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="outside"></div>
<div id="menu" class="menu">
<div id="menu-list" class="menu-list">
a
</div>
</div>
</body>
</html>我在Mozilla的IRC网络的 #servo 频道上与emilio进行了一次简短的交谈。他建议在菜单元素上触发鼠标按下事件，在外部元素上触发鼠标按下事件。浏览器假定这是一个拖动动作，并选择两者之间的文本。问题似乎是鼠标向上事件在单击事件之后放置在事件队列中。因此，即使事件传播停止，队列中也已经有另一个事件，鼠标向上，最终将针对新放置的外部元素。这可能是一个错误，所以我要去 https://bugzilla.mozilla.org/看看是否是这种情况。
已经提出了一些解决方法，例如使用CSS的用户选择使文本不可选择，以及使用Javascript的preventDefault()来避免运行默认事件处理程序。其他stackoverflow用户提到了这些，但不幸的是被否决了，随后删除了他们的答案。无论如何，我都会将这些解决方法留在这里，供任何可能需要它们的人使用。
感谢所有帮助调查这个问题的人。