按钮图标与文字区域无法点击，仅周边可点击的技术求助

核心问题分析 #

按钮内部嵌套的<a>标签会拦截点击事件；同时图标、文字等子元素未设置事件穿透，导致点击这些区域时无法触发父级按钮的click事件。

具体修复步骤 #

• 移除按钮内的<a>标签：按钮本身已是交互元素，无需嵌套链接，将<a href="#" class="text">替换为<span class="text">。
• 设置内部元素事件穿透：给.icon、.text、.bx添加pointer-events: none，让点击事件直接传递到父按钮。
• 优化按钮布局（可选）：调整内边距和对齐方式，确保内容居中且整个按钮区域可点击。

修改后的代码 #

SCSS代码

.navbar {
  background-color: #292929;
  height: 70px;
}

.button {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让内容水平居中，替代margin偏移 */
  background-color: transparent !important;
  color: white !important;
  margin-left: 100px;
  margin-top: 5px;
  width: 60px;
  height: 60px;
  padding: 10px;
  cursor: pointer; /* 明确鼠标样式 */
}

.bx {
  font-size: 30px;
  pointer-events: none; /* 事件穿透 */
}

.icon {
  flex: 1;
  pointer-events: none; /* 事件穿透 */
}

.text {
  text-align: center;
  color: white;
  font-size: 12px;
  pointer-events: none; /* 事件穿透 */
}

/* Add hover effect to the button */
.button:hover .text, 
.button:hover .bx {
  color: red;
}

HTML代码

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-start">
    <!-- Button on the left side -->
    <button class="button" (click)="logInfo()">
      <span class="icon">
        <i class='bx bx-file-find'></i>
      </span>
      <span class="text">Scan</span> <!-- 将a标签改为span -->
    </button>
  </div>
  <div class="navbar-end">
    <!-- Text on the far right side -->
    <div class="navbar-item is-size-5 has-text-white">test</div>
    <img src="assets/favicon.ico" />
  </div>
</nav>

为什么之前的方法无效？ #

• 添加padding/margin只是调整了按钮尺寸，但没解决内部元素拦截事件的问题；
• 设置pointer-events: none时可能没覆盖到所有内部元素（比如.bx图标本身）；
• 嵌套<a>标签会优先触发链接的默认行为，导致按钮的click事件无法触发；
• 修改display: block破坏了flex垂直布局，但没触及核心问题。

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