暫時禁用.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

回答

相關問題