暂时禁用.hover

我想弄清楚如何暂时禁用jquery中由于页面上的事件.hover。暂时禁用.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失去了从这里与我的代码去哪里。谢谢！

来源

2014-11-25 ScottDumbo

您是否试图杀死页面上所有内容或某些已知元素的鼠标悬停？ – stakolee 2014-11-25 15:00:39

该事件已附加，代码不会神奇地返回并撤消该步骤。为了好玩，将hoverEnabled设置为false，则该事件不会被应用。 – epascarello 2014-11-25 15:01:48

@stakolee基本上整个页面。 – ScottDumbo 2014-11-25 16:02:52

把条件放在里面，这样它会发射，但什么都不做。

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

来源

2014-11-25 15:00:51

谢谢！这正是我需要的。 – ScottDumbo 2014-11-25 15:59:55

最初在加载页面时创建悬停功能。因此，在更改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" />');        
    } 
});

来源

2014-11-25 15:06:32

感谢您的解释。（'hover'，function]是否合适或更好？ – ScottDumbo 2014-11-25 16:01:01

'on（'hover'）'从jQuery 1.9开始弃用：http： //jquery.com/upgrade-guide/1.9/#quot-hover-quot-pseudo-event – 2014-11-25 16:13:33

@ScottDumbo它只是增加了代码的可读性:) – 2014-11-25 20:33:47

这使得悬停事件成为重新启用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

来源

2014-11-25 15:33:41

谢谢！我无法重新启用我的网页，但这并不是什么大问题。我非常感谢你为帮助我而付出的额外一步！ – ScottDumbo 2014-11-25 16:01:50

如果你没有声明'timer'变量会发生这种情况。我应该在我的帖子中指出这一点，但你会在我的小提琴中看到它。 – 2014-11-25 16:05:59

哎呀..它是..我的道歉没有看到你的小提琴。忙于与其他事物一起工作，并且必须浏览它。 – ScottDumbo 2014-11-25 17:31:28

有两个方面.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 
     } 
    } 
);

来源

2014-11-25 15:42:51 Matt

感谢您的深入解释。 – ScottDumbo 2014-11-25 16:02:19

暂时禁用.hover

回答

相关问题