按钮点击仅点击右侧时生效，如何让整个按钮可点击并显示指针光标？

问题原因分析 #

只有按钮局部区域可触发点击事件，通常是以下两个原因导致：

• 按钮本身未占满父容器的可点击区域，仅文本所在的按钮内容区可响应点击
• 按钮内部的文本元素被设置了pointer-events: none属性，拦截了部分区域的点击事件

修复方案 #

你可以按照以下步骤修改代码：

1. 给按钮添加Bootstrap内置的w-100类，让按钮占满外层d-flex容器的全部宽度，确保整个按钮区域都属于可点击范围
2. 给按钮添加cursor: pointer样式（也可以用Bootstrap的cursor-pointer工具类），保证鼠标悬停全按钮区域都显示指针光标
3. 如果按钮内需要放两段文本，直接用<br>换行或者块级span包裹即可，不要给内部文本元素设置拦截点击的属性

修改后的代码示例 #

<div class="d-flex">
  <button 
    (click)="myfunction()" 
    type="button" 
    class="btn btn-primary w-100 cursor-pointer"
    *ngIf="currentPath != '/users/userlist'"
  >
    第一段文本<br>
    第二段文本
  </button>
</div>

如果你的外层弹性容器有特殊的对齐逻辑，也可以把w-100换成flex: 1的样式，让按钮自动填充弹性容器的可用空间，效果一致。

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