我无法理解为什么我的代码中的单击选择文本

I'm trying to make a little menu, that opens when you click on it, and closes when you click outside it. I managed to do that, mostly. The button I press to open the menu has some padding, and when I click specifically on the padding the menu that opens has all it's text selected, which is weird, and I don't understand why it happens. I have looked through MDN's documentation, my favorite search engine, and IRC(freenode) for a solution, but so far no luck.

我正在尝试创建一个小菜单，当您单击它时会打开，当您在其外部单击时会关闭。我设法做到了，主要是。我按下打开菜单的按钮有一些填充，当我专门点击填充时，打开的菜单会选择所有文本，这很奇怪，我不明白为什么会发生这种情况。我查看了MDN的文档，我最喜欢的搜索引擎和IRC（freenode）的解决方案，但到目前为止还没有运气。

I made a minimal working example, which I link to at the bottom, and I added a few comments to it about some lines you can comment to change the behavior. Simply, you can press the blue square, and the letter 'a' will show up selected, the expected behavior is that the letter 'a' should show up, but unselected. If you understand what is going on please let me know. ^_^

我做了一个最小的工作示例，我链接到底部，我添加了一些注释，你可以评论一些行来改变行为。简单来说，你可以按蓝色方块，字母'a'将显示为选中，预期的行为是字母'a'应该显示，但未选中。如果您了解发生了什么，请告诉我。 ^ _ ^

Edit: I see some discussion bellow about different results on different browsers. I'm currently using Firefox 59.0.1 64-bit on Linux(Fedora 27). A suggestion was made that this might be a bug, I can't rule that out.

编辑：我看到一些关于不同浏览器的不同结果的讨论。我目前在Linux（Fedora 27）上使用64位的Firefox 59.0.1。有人建议这可能是一个错误，我无法排除这一点。

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>

更多相关文章

随机推荐