下拉按钮箭头图片区域无法点击问题排查求助

你的问题出在按钮内的<img>元素默认会拦截鼠标点击事件，导致点击图片区域时无法触发按钮绑定的dropdownMenu()函数。解决思路很简单，让图片不拦截点击事件，让点击穿透到下方的按钮上即可。

具体修复步骤 #

1. 给按钮内的<img>添加pointer-events: none;样式，让点击事件直接穿透到按钮
2. 清理CSS中冗余的属性：.dropdown同时写了position: absolute;和position: relative;，后者会覆盖前者，建议保留position: relative;作为下拉菜单的定位容器

修改后的完整代码 #

HTML 部分 #

<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
 document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!-- 添加pointer-events: none让点击穿透到按钮 -->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px; pointer-events: none;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
<a href="profile.html">Profile</a>
<a href="settings.html">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</body>
</html>

CSS 部分（修复冗余属性） #

.dropbtn {
 background-color: white;
 color: black;
 padding: 10px;
 font-size: 14px;
 border: none;
 cursor: pointer;
 position: absolute;
 top: -69.5px;
 left: 1280px;
 border-radius: 4px;
 width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
 background-color: rgb(218, 218, 218);
}
.dropdown {
 /* 移除冗余的position: absolute，保留relative作为下拉容器 */
 position: relative;
 display: inline-block;
}
.dropdown-content {
 display: none;
 position: absolute;
 top: -20px;
 left: 1210px;
 background-color: #f1f1f1;
 min-width: 164px;
 overflow: auto;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 border-radius: 6px;
}
.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}

原理说明 #

pointer-events: none;是CSS的一个特殊属性，它会让目标元素完全忽略所有鼠标事件（点击、hover、拖拽等），所有事件都会穿透到它下方的可交互元素上。这样点击图片时，实际触发的就是按钮的onclick事件，下拉菜单就能正常展开/收起了。

如果觉得内联样式不够优雅，也可以把图片样式统一写到CSS类里：

.dropbtn img {
  height:8px;
  width:10px;
  margin-bottom: 2px;
  margin-left: 5px;
  pointer-events: none;
}

之后HTML里的图片只需写<img src="images.png">即可，更便于维护。

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