点击单选按钮时会触发什么命令？

Question

我知道浏览器之间有所不同; 例如,如果我将一个功能附加到单选按钮的onclick和onchange事件上,然后单击它,Chrome将在onchange上触发,然后点击,而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): 更改然后点击