记一次 radio 标签 onblur 异常的分析过程

问题版本：Safari 10.0 (12602.1.50.0.10)

问题描述：

目标版本浏览器在鼠标点击 radio 的小圆点后再点击其他区域并不会触发 onblur 事件。问题可以重现，在 Chrome 下无此问题。

1

<input type="radio" onblur="alert('blur')">

分析：

我们先找到了 w3 上关于 blur 事件的定义：https://www.w3.org/TR/uievents/#event-type-blur

A user agent MUST dispatch this event when an event target loses focus. The focus MUST be taken from the element before the dispatch of this event type. This event type is similar to focusout, but is dispatched after focus is shifted, and does not bubble.

也就是说，onblur 事件未触发是因为该控件在此之前并没有被 focus ，所以我们在点击 radio 控件的时候监听点击事件，在点击的时候主动触发一下设置 focus

1

<input type="radio" onblur="alert('blur')" onclick="this.focus()">

问题解决。