含Font Awesome图标的下拉按钮在Chrome中点击失效问题

这个问题确实和事件目标的处理逻辑有关，并非单纯的CSS故障，但Chrome的事件机制特性和当前代码的配合问题导致了这个异常现象。

问题根源 #

当你点击Font Awesome图标（<i class="fas fa-bars"></i>）时，Chrome中event.target会直接指向这个<i>元素，而非外层的.dropbtn按钮。这会触发两个冲突的行为：

1. 按钮的onclick="dropMenu()"虽然会通过事件冒泡触发，暂时打开下拉菜单；
2. 但随后触发的window.onclick事件中，因为event.target不匹配.dropbtn，代码会立刻关闭刚刚打开的下拉菜单，看起来就像是点击图标完全没反应。

其他浏览器在事件目标的冒泡处理或matches()方法的匹配逻辑上有细微差异，所以没有出现这个问题。

解决方案 #

方案1：修改JS事件判断逻辑（推荐）

把window.onclick中的判断条件，从检查event.target是否直接匹配.dropbtn，改成检查事件目标是否在.dropbtn内部（使用closest()方法）。这样不管点击的是按钮本身还是它的子元素，都会被识别为点击了按钮，不会误关闭下拉菜单。

修改后的JS代码：

function dropMenu() {
  document.getElementById("drop-menu").classList.toggle("show");
}

window.onclick = function(event) {
  // 检查点击目标是否不是.dropbtn及其内部元素
  if (!event.target.closest('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

方案2：通过CSS让图标不接收点击事件

给Font Awesome图标添加pointer-events: none;，这样点击图标时，点击事件会直接传递给父元素（按钮），event.target就会是.dropbtn，避免判断逻辑出错。

修改后的CSS代码（更新.fa-bars规则）：

.fa-bars {
  color: white;
  pointer-events: none;
}

额外注意点 #

你的.dropbtn CSS规则里设置了display: none;，如果这个按钮是为移动端设计的，确保你有对应的媒体查询（比如@media (max-width: 768px)）将其改为display: block;，否则按钮本身不会显示，也会影响功能正常触发。

内容的提问来源于stack exchange，提问作者PeterH