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

时间:2013-03-22 21:21:05

标签: javascript html events dom cross-browser

我知道浏览器之间有所不同;例如如果我将一个函数附加到单选按钮的onclick和onchange事件上,然后单击它,Chrome将触发onchange然后onclick,而Firefox则相反。

有没有人知道的资源会破坏浏览器的触发顺序?

1 个答案:

答案 0 :(得分:0)

这是一个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上:

铬: 更改然后单击

Safari中: 更改然后单击

的iOS(6): 更改然后单击