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

Question

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

有没有人知道可以通过浏览器分解此触发顺序的资源？

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):更改然后单击