Jquery 在Chrome和Opera上,选择器控件上的mousedown操作会触发mousedown和mouseup事件
我正在开发一个基于javascript的web应用程序,它在一个选项卡上显示不同时间序列的天气数据。选项卡上显示的时间序列由id为tempVarSelect的select控件控制。对tempVarSelect控件的更改旨在执行changeTempDisplay,它在选项卡上隐藏并显示时间序列图。changeTempDisplay函数通过Jquery mouseup事件绑定到tempVarSelect中的更改:Jquery 在Chrome和Opera上,选择器控件上的mousedown操作会触发mousedown和mouseup事件,jquery,google-chrome,events,mouse,Jquery,Google Chrome,Events,Mouse,我正在开发一个基于javascript的web应用程序,它在一个选项卡上显示不同时间序列的天气数据。选项卡上显示的时间序列由id为tempVarSelect的select控件控制。对tempVarSelect控件的更改旨在执行changeTempDisplay,它在选项卡上隐藏并显示时间序列图。changeTempDisplay函数通过Jquery mouseup事件绑定到tempVarSelect中的更改: $("#tempVarSelect").mouseup(function( ){
$("#tempVarSelect").mouseup(function( ){ changeTempDisplay(); });
function changeTempDisplay(){
var tempVar = Number(document.getElementById("tempVarSelect").value);
switch (tempVar)
{
case 0:
console.log(" temp_Display = " + tempVar);
$("#tmaxGraph").show();
$("#tmaxLabels").show();
$("#tminGraph").hide();
$("#tminLabels").hide();
plotTMAX();
break;
case 1:
console.log(" temp_Display = " + tempVar);
$("#tmaxGraph").hide();
$("#tmaxLabels").hide();
$("#tminGraph").show();
$("#tminLabels").show();
plotTMIN();
break;
}
}
这适用于Safari和Firefox,即tempVarSelect选择器上的mousedown mousemove mouseup序列会使mouseup上选择的图形类型正确显示
但在Chrome和Opera上,mousedown上的changeTempDisplay似乎会触发,导致当前的时间序列显示被重新绘制,并且mousedown上选择的tempVar编号会回显到console.log。因此,显示屏没有变化。Mousemove和mouseup会使tempVarSelect选择器指定正确的tempVar值,并在mouseup上高亮显示正确的选定变量,但由于changeTempDisplay在mousedown上触发,因此时间序列显示不会发生更改。之后,当我在tempVarSelect上向下移动鼠标时,changeTempDisplay将使用tempVar的已更改值触发,并且显示将按其应该的方式更改为新的时间序列
通过执行一个简单的测试,将mousedown和mouseup时间回显到console.log,即
var time0=新的Date.getTime
$("#tempVarSelect").bind("mouseup",function( ){
time = new Date().getTime() - time0;
console.log(" tempVarSelect mouseup at t = " + time);
});
$("#tempVarSelect").bind("mousedown",function( ){
time = new Date().getTime() - time0;
console.log(" tempVarSelect mousedown at t = " + time);
});
我发现实际发生的是,一个mousedown操作在Chrome中触发了mousedown mouseup序列,但在Safari和Firefox中只有mousedown。因此,在Chrome中,changeTempDisplay会触发鼠标向下的操作
我检查过类似的问题,例如,但它们似乎不适用于我所看到的
有人知道为什么会发生这种情况吗?我找到了解决办法,删除Jquery绑定并将onchange=changeTempDisplay添加到选择器标记中。我还尝试了onclick=changeTempDisplay,但这在上面描述的Chrome中产生了相同的问题。