暂时禁用 .hover

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 类，悬停仍然会继续。

任何帮助将不胜感激..我的代码有点迷失从这里去哪里。谢谢！

Answer 1

将条件放入其中，这样它会触发但什么也不做。

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

Answer 2

这允许悬停事件在 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 3

您似乎缺少.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
        }
    }
);

Answer 4

最初在加载页面时会创建悬停功能。因此，更改 hoverEnabled 变量后，悬停仍然有效。

您应该像这样检查函数中 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" />');                              
    }
});