单选按钮点击时事件的触发顺序是什么？

Question

我知道这在不同的浏览器中是不同的；例如，如果我将一个函数附加到单选按钮的onclick和onchange事件上，然后点击它，Chrome会先触发onchange再触发onclick，而Firefox则相反。

有没有人知道一个资源可以按浏览器分解这个触发顺序？

- matt lohkamp

---

请注意：即使使用jQuery，不同的浏览器也会以不同的顺序传递事件。 - Steve Wellens

据我所知，无法更改触发顺序，但您可以检查“event.type”，并“重定向”到所需的事件处理程序。 - Teemu

我并不真正需要改变顺序（尽管这种差异可能很烦人）- 我只想知道可以期望什么，并且想知道是否有其他人在运行一堆测试之前已经将其映射出来。 - matt lohkamp

Answer 1

这是一个JSFiddle，它会告诉你在每个浏览器中运行的情况：

http://jsfiddle.net/BUkHz/

<label for="myRadio">Radio Button</label><input type="radio" name="myRadio" id="myRadio"/>
<label for="myRadio">Radio Button 2</label><input type="radio" name="myRadio" id="myRadio2"/>




var myRadio = document.getElementById('myRadio');
    var myRadio2 = document.getElementById('myRadio2');

    myRadio.addEventListener('change', interceptRadioEvent);
    myRadio.addEventListener('click', interceptRadioEvent);
    myRadio2.addEventListener('change', interceptRadioEvent);
    myRadio2.addEventListener('click', interceptRadioEvent);

    function interceptRadioEvent(e){
        //do anything else you want to here...
        radioEventHandler(e);
    }

    function radioEventHandler(e){
        console.log(e.type);
    }

我有一种直觉，排序取决于你所做的事情-例如，如果首次点击只有一个单选按钮，则为：改变，点击，然后进一步的点击只是'点击'，因为它对点击进行响应但无法取消它。

希望能够帮到你。

在Mac上：

Chrome： 改变然后点击

Safari： 改变然后点击

iOS（6）： 改变然后点击

- Lewis

---

我希望有人已经为我测试过它，但是没错，你说得对，这样的东西完全可以映射出那些点火顺序。 - matt lohkamp

似乎对我没有起作用。我甚至检查了你在fiddle上发布的代码。 Chrome 31.0.16版本：Change->click Firefox 25.0.1版本：click->change 还有，是Windows操作系统，但我想那不应该是问题。 - Hiren Desai

刚试了一下，我得到了1.点击2.更改。所以这个答案和2020年（Mac上的Chrome 80）之间发生了变化。 - Mike Szyndel