Question

我正在开发一个基于javascript的网络应用程序，它在选项卡上显示各种时间序列的天气数据。选项卡上显示的时间序列由id = tempVarSelect的选择控件控制。对tempVarSelect控件的更改旨在执行changeTempDisplay（），它隐藏并显示选项卡上的时间序列图。 changeTempDisplay（）函数通过Jquery mouseup事件绑定到tempVarSelect中的更改：

  $("#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上，changeTempDisplay似乎会在mousedown上触发，导致重新绘制当前时间序列显示，并且mousedown上选择的tempVar编号将回显到console.log。结果，显示器没有变化。 Mousemove和mouseup使tempVarSelect选择器分配正确的tempVar值并在mouseup上突出显示正确的选定变量，但由于changeTempDisplay在mousedown上触发，因此时间序列显示没有变化。当我在tempVarSelect之后进行mousedown时，changeTempDisplay将使用更改的tempVar值触发，并且显示将更改为新的时间序列。

进行简化测试，将mousedown和mouseup时间回显到console.log，即

var time0 = new 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。因此，changeTempDisplay（）将触发Chrome中的mousedown操作。

我检查过类似的问题（例如jQuery mouseup not being detected correctly），但它们似乎不适用于我所看到的。

有没有人知道为什么会这样？

在Chrome和Opera上，选择器控件上的mousedown操作会导致mousedown和mouseup事件触发

0 个答案: