【问题标题】:what order do events fire on radio button click?单击单选按钮时事件触发的顺序是什么?
【发布时间】:2013-03-12 21:11:39
【问题描述】:

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

是否有任何人知道的资源可以通过浏览器分解此触发顺序?

【问题讨论】:

  • 仅供参考:即使使用 jQuery,事件的顺序也会因浏览器而异。
  • Afaik 无法更改触发顺序,但您可以检查 event.type,然后“重定向”到所需的事件处理程序。
  • 我真的不需要更改顺序(这种差异可能很烦人)-我只想知道会发生什么,并想知道其他人是否有在我运行一堆测试之前把它画出来。

标签: javascript html events dom cross-browser


【解决方案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 上:

铬: 更改然后点击

Safari: 更改然后点击

iOS(6): 更改然后点击

【讨论】:

  • 我希望其他人已经为我测试了它 - 但是,是的,你是对的,这样的事情将完全映射出那些解雇命令。
  • 这似乎对我不起作用。事件我检查了您在小提琴上发布的代码。 chrome 31.0.16 版本:更改-> 单击 Firfox 25.0.1 版本:单击-> 更改,是的,忘记提及操作系统是 Windows,但我想这应该不是问题
  • 刚把它绑起来,我得到 1. 点击 2. 改变。所以这在这个答案和 2020 年(Mac 上的 Chrome 80)之间发生了变化
猜你喜欢
  • 1970-01-01
  • 2023-04-04
  • 1970-01-01
  • 2012-03-14
  • 2023-02-03
  • 1970-01-01
  • 2014-09-01
  • 1970-01-01
  • 2021-03-02
相关资源
最近更新 更多