点击Material图标时(click)事件未触发问题求助

嗨，我来帮你搞定这个问题！你遇到的情况是<a>标签上的(click)事件在内部的箭头mat-icon上没反应，但其他区域都正常，这大概率是Material的mat-icon组件默认的CSS设置在搞鬼——它默认加了pointer-events: none，让图标没法接收鼠标点击，自然就没法把事件冒泡到父级的<a>上啦。

下面给你两种解决方案，推荐第一种哦：

方案1：给mat-icon开启点击事件支持 #

你只需要在组件的样式文件里加几行CSS，让mat-icon能接收点击事件就行：

/* 全局生效，所有mat-icon都能接收点击 */
.mat-icon {
  pointer-events: auto;
}

如果只想让这个箭头图标生效，不想影响其他mat-icon，可以给外层的<span>加个类名，比如expand-toggle-icon，然后精准设置样式：

修改模板代码：

<span *ngIf="section.pages.length>0" class="expand-toggle-icon">
  <mat-icon *ngIf="section.id==id_focus">keyboard_arrow_down</mat-icon>
  <mat-icon *ngIf="section.id!=id_focus">keyboard_arrow_right</mat-icon>
</span>

对应的CSS：

.expand-toggle-icon .mat-icon {
  pointer-events: auto;
}

这样设置后，点击箭头图标时，事件就能正常冒泡到父级的<a>标签，触发switchSub函数啦。

方案2：直接给mat-icon绑定click事件（不推荐） #

要是你不想改CSS，也可以直接在每个mat-icon上绑定和父级一样的(click)事件：

<mat-icon *ngIf="section.id==id_focus" (click)="switchSub(section.id)">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="section.id!=id_focus" (click)="switchSub(section.id)">keyboard_arrow_right</mat-icon>

不过这种方法会重复写相同的事件绑定，代码不够简洁，所以还是方案1更优。

额外排查小技巧 #

如果上面的方法都没效果，你可以检查下：

• 有没有其他代码在mat-icon上阻止了事件冒泡（比如用了$event.stopPropagation()）
• 用浏览器的开发者工具看看，图标是不是被其他元素挡住了（比如透明的遮罩层）

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