javascript - 下拉菜单在 Firefox 中运行良好，但在 Chrome 中不可靠

Question

我有一个使用 JavaScript 的下拉菜单。它在 Firefox(版本 57)中可靠地工作。但是，在 Chrome(版本 62)中，仅当您首先单击页面上的其他位置，然后单击菜单图标/按钮时，才会出现下拉菜单。我正在使用 jQuery 3.2.1 和 Bootstrap 2.3.2。

var shown;

$(function() {
  shown = false;
});

window.onclick = function(event) {
  if (event.target.id == "button") {
    if (shown)
      $("#dropdown").hide();
    else
      $("#dropdown").show();
    shown = !shown;
  } else if (shown) {
    $("#dropdown").hide();
    shown = false;
  }
}

.dropdown {
  display: none;
  float: right;
  right: 0;
  margin-right: 7px;
  position: absolute;
  z-index: 1;
}

.dropdown a {
  padding: 12px 16px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="icon">
  <button id="button">
    <img src="cogwheel.png">
  </button>
  <div id="dropdown" class="dropdown">
    <a href="todo2">Register</a>
    <a href="todo1">Login</a>
  </div>
</div>

Answer 1

我已经测试了 Chrome 62 和 Firefox 57 中提供的代码。我无法重现您描述的行为:

...in Chrome (version 62) the drop menu only appears if you first click elsewhere on the page, and then on the menu icon / button

但是，当您单击 <img> 时会出现问题在<button>里面这是由 <img> 引起的作为 Chrome 中的事件目标。您可以通过更改条件来检查 #button 来解决此问题是目标本身或目标的父节点。

所以改变if (event.target.id == "button")至 if (event.target.id == "button" || event.target.parentNode.id == "button") .

var shown;

$(function() {
  shown = false;
});

window.onclick = function(event) {
  if (event.target.id == "button" || event.target.parentNode.id == "button") {
    if (shown)
      $("#dropdown").hide();
    else
      $("#dropdown").show();
    shown = !shown;
  } else if (shown) {
    $("#dropdown").hide();
    shown = false;
  }
}

.dropdown {
  display: none;
  float: right;
  right: 0;
  margin-right: 7px;
  position: absolute;
  z-index: 1;
}

.dropdown a {
  padding: 12px 16px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="icon">
  <button id="button">
    <img src="cogwheel.png">
  </button>
  <div id="dropdown" class="dropdown">
    <a href="todo2">Register</a>
    <a href="todo1">Login</a>
  </div>
</div>