Firefox浏览器中关闭图标无法正常工作的问题排查与解决

咱们先来拆解下问题：你把ng-click事件绑定在了嵌套在按钮里的<span>标签上，这种写法在Chrome里能正常工作，但Firefox对点击事件的处理有个细微差异——内联元素（比如<span>）的点击区域识别逻辑和Chrome不太一样，有时候会导致绑定在它身上的点击事件无法被正确触发。另外从可访问性的最佳实践来说，点击事件本就该绑定在<button>这种原生可交互元素上，而不是内部的装饰性元素，这也是跨浏览器兼容的一个小细节。

修复步骤 #

直接把ng-click从<span>移到外层的<button>标签上就能解决问题，修改后的代码如下：

<button type="button" class="close" aria-label="Close" ng-click="c.resetModalFlow()">
  <span aria-hidden="true">&times;</span>
</button>

这样修改后，不管点击按钮的任何区域（包括里面的叉号图标），在Chrome和Firefox里都能正常触发关闭逻辑，同时也更符合WAI-ARIA的可访问性规范。

如果修改后还是有问题，可以额外检查这两点：

• 确认你的AngularJS版本在Firefox中没有已知的事件绑定类bug
• 排查是否有CSS样式（比如pointer-events: none）意外作用在了<span>或<button>上，阻止了点击事件的传递

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