Font-Awesome 5将单选按钮转为SVG后，如何检测选中事件？

我之前也碰到过类似的坑！Font Awesome 5的all.js默认会开启自动替换功能，它会把带有特定类名的元素转换成SVG，但有时候会误识别表单控件——比如你的单选按钮就被它当成可替换元素处理了，导致原来的<input>变成<svg>，自然拿不到onchange事件。

这里有几个靠谱的解决办法：

方法1：全局控制自动替换行为 #

你可以在引入Font Awesome的脚本时，添加data-auto-replace-svg="nest"属性，它会把SVG嵌套在原元素内部，而不是直接替换原<input>节点，这样就能保留原生控件的事件：

<script defer 
        src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" 
        integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" 
        crossorigin="anonymous"
        data-auto-replace-svg="nest">
</script>

如果想完全禁用自动替换，也可以把属性值改成false。

方法2：单独豁免目标单选按钮 #

如果不想全局调整，只想针对特定单选按钮保留原生状态，可以给<input>标签加上data-fa-no-auto属性，明确告诉Font Awesome不要替换这个元素：

<input id="radio1" type="radio" name="radio" class="..." data-fa-no-auto>

方法3：用FA图标做装饰（推荐规范写法） #

其实更稳妥的方式是不要让FA直接替换表单控件，而是把FA图标作为单选按钮的视觉装饰，保留原生<input>来处理事件。比如用CSS隐藏原生radio，用相邻的FA图标展示选中状态：

<!-- 结构 -->
<label class="radio-wrap">
  <input type="radio" name="radio" id="radio1">
  <i class="fa fa-circle"></i> 选项1
</label>

<!-- 样式 -->
<style>
.radio-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-wrap .fa-circle {
  color: #ccc;
  cursor: pointer;
  margin-right: 8px;
}
.radio-wrap input[type="radio"]:checked + .fa-circle {
  color: #2196F3;
}
</style>

这样既保留了原生radio的onchange事件，又能用上Font Awesome的图标样式，一举两得。

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