什么顺序做事件点击单选按钮？ [英] what order do events fire on radio button click?

问题描述

我知道这是不同的浏览器;例如如果我将一个函数附加到单选按钮的onclick和onchange事件，然后点击它，Chrome会启动onchange然后点击，而Firefox则反过来。

I know this is different between browsers; e.g. If I attach a function to the onclick and onchange event of a radio button, then click on it, Chrome fires onchange then onclick, while Firefox does the opposite.

推荐答案

这里有一个JSFiddle，它会告诉你是否运行它在每个浏览器中：

Here's a JSFiddle that will tell you if you run it in each browser:

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);
    }

我希望订单取决于你在做什么 - 例如，如果你只有一个单选按钮第一次点击它将是：更改，点击，然后进一步的点击将是'点击'，因为它响应的点击，但不能取消设置。

I have a hunch that the order depends on what you're doing - for example if you only have one radio button on first click it will be : change, click then further clicks would be 'click' only as it responds to the click but can't unset it.

我希望有助于。

在Mac上：

Chrome：
更改，然后点击

Chrome: change then click

Safari：
更改，然后点击

Safari: change then click

iOS（6）：
更改，然后点击

iOS(6): change then click

这篇关于什么顺序做事件点击单选按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！