Question

我正在试图弄清楚如何暂时禁用jquery中的.hover，因为页面上有一个事件。

我当前的jsfiddle看起来像这样.. http://jsfiddle.net/4vhajam3/3/ （请注意，为了理智，我已经删除了很多代码）

当前页面设置是，如果您将鼠标悬停在任何类别“toqc”上，则QC图像将显示在下面的div中。我的需求是，如果用户点击其中一个表格单元格，鼠标悬停将暂时禁用（例如10秒），这样他们就可以在页面上移动一点而无需更改div中的图像。

我在这个网站上查看了一些其他问题（即jQuery: temporarily disable hover... unintended side effect），虽然我理解了代码，但我似乎无法修改它以便为我工作。特别是我在尝试

    var hoverEnabled = true;

$('.toqc').click(
    function(){
        hoverEnabled = false;
    });

if(hoverEnabled){
    $('#ussfcanl').hover(function() {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
});
}

但是，即使在点击.toqc类的东西之后，当我移动到另一个.toqc类时，悬停仍然继续。

任何帮助都将不胜感激.Kinda迷失在我的代码所在的位置。谢谢！

Answer 1

把条件放在里面，那样它会开火但什么都不做。

$('#ussfcanl').hover(function() {
    if(hoverEnabled){
        $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
    }
});

Answer 2

最初在加载页面时，会创建悬停功能。因此，在更改hoverEnabled var。

后，悬停仍然有效

您应该检查函数中hoverEnabled的状态，如下所示：

//written this way, the function seems to make more sense
$('#ussfcanl').on('mouseenter', function() {
    //checking the type just in case
    if(hoverEnabled === true) {
        $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
    }
});

Answer 3

这允许悬停事件在10秒后重新启用：

$('.toqc').click(function(){
  hoverEnabled = false;
  clearTimeout(timer);
  timer= setTimeout(function(){
    hoverEnabled=  true;
  },10000);
});

使用以下内容替换您的hover事件，即使hoverEnabled为假，您也可以点击更改图片：

$('#ussfcanl').on('mouseover click', function(event) {
  if(event.type!=='mouseover' || hoverEnabled) {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/satsfc.gif" />');                              
  }
});

$('#mexsfcanl').on('mouseover click',function(event) {
  if(event.type!=='mouseover' || hoverEnabled) {
    $('#imageholder').html('<img src="http://www.hpc.ncep.noaa.gov/sfc/namaksfcwbg.gif" />');
  }
});

<强> Working Fiddle

Answer 4

您似乎缺少.hover()两个方面。

首先是事件绑定在页面加载上。这就是为什么，正如其他答案所提到的，你需要将条件置于事件触发回调（function() {}部分）中，如下所示：

$('#ussfcanl').hover(function() {
    if(hoverEnabled){
        // do stuff on hover
    }
});

第二部分是jQuery .hover()方法实际上是mouseenter和mouseleave事件的简写。使用一个函数调用.hover（）将导致该函数为两个事件触发，这似乎不是您想要的。

因此，您可能希望在此方法中使用两个回调函数，第一个告诉浏览器在触发mouseenter事件时要执行的操作，第二个用于mouseleave事件。见the jQuery docs on .hover()

$('#ussfcanl').hover(
    function() {
        if(hoverEnabled){
            // do stuff on mouseenter
        }
    },
    function() {
        if(hoverEnabled){
            // do stuff on mouseleave
        }
    }
);

暂时禁用.hover

4 个答案: