jquery绑定函数在Firefox和Chrome之间有不同的执行顺序

Posted 2023-03-05

【中文标题】jquery绑定函数在Firefox和Chrome之间有不同的执行顺序

【英文标题】：jquery bind function have different execute sequence between Firefox and Chrome

【发布时间】：2012-01-26 17:53:48

【问题描述】：

就像这个例子： http://jsfiddle.net/nicaia/6cHxR/

js代码：

$('#checkbox_id').bind('change',function(
    alert('change');
).bind('click',function(event)
    alert('click');event.preventDefault();
);

在 chrome 中单击复选框将显示：

alert 'change' 和 alert 'click' 不勾选复选框。（先取消勾选复选框）

在 Firefox 中单击复选框将显示： alert 'click' 并且不会选中复选框。（复选框先取消选中。）

在 Firefox 中不会触发更改。 我不知道为什么。有人可以告诉我吗？

谢谢。

【问题讨论】：

我认为这是因为复选框在警报后失去焦点。因此不会触发“更改”事件api.jquery.com/change

但在 chrome 中会触发更改事件。

linkthis question和我的问题有点像。并感谢@Nicola

@Sergey 如果您将 alert 替换为 console.log，您会发现同样的问题。

【参考方案1】：

我认为 chrome 与其他浏览器的行为不同。我试过这段代码：

$('#checkbox_id').bind('change',function()
    alert('change');
).bind('click',function(event)
    alert('click');
);

（这里的小提琴：http://jsfiddle.net/6cHxR/8/） Firefox 在更改处理程序之前执行单击处理程序，而 IE 和 chrome 在单击处理程序之前执行更改处理程序。 我认为您对此无能为力

【讨论】：

在点击函数中这段代码“event.preventDefault()”停止在firefox中执行更改事件，因为点击处理程序在更改处理程序之前执行。为什么点击处理程序将在更改处理程序之前执行在 Firefox 中？

@Bodil 我认为 firefox 处理事件的方式与其他浏览器不同。我不知道是否有这方面的规范，因此每个供应商都会进行实施。对我来说，点击处理程序在更改处理程序之前执行更有意义，但这是我的意见