2009-12-07 4 views
11

Ich möchte in der Lage sein zu erkennen, ob sich die Maus noch über das Element in dem folgenden Szenario ist:jQuery: ist die Maus immer noch über das Element?

  1. Wenn Mouseover für ein paar Sekunden dann schlafen.
  2. Einmal getan Schlafende Kontrolle der Maus ist immer noch über das gleiche Element.
  3. Wenn wahr, dann tu etwas.

Wie kann ich # 2 erreichen?

Vielen Dank.

+0

Was Sie während der „Schlaf“ – PetersenDidIt

+1

petersendidit tun: Nichts, es ist nur ein Timeout. – thedp

+0

Was passiert, wenn die Maus beim Timeout "wieder über dasselbe Element" ist? Zählt das als "immer noch über dasselbe Element"? –

Antwort

15

Werfen Sie einen Blick auf die hoverIntent Plugin für jQuery. Sie erhalten einen neuen Event-Handler, der nur dann ausgelöst wird, wenn Sie für eine bestimmte Zeit über einem Element geblättert haben. Indem Sie seine Optionen optimieren, sollten Sie in der Lage sein, genau das zu erreichen, was Sie wollen.

+1

+1 nützliches Plugin – alex

+0

Ich liebe dieses Plugin! Vielen Dank. – thedp

+0

Ein ähnliches Plug-in zu HoverIntent ist hier http://blog.threedubmedia.com/2008/08/eventspecialhover.html, hängt genau das, was Sie brauchen. Kann es wert sein, beide zu testen. – Nooshu

2

Hier ist eine Art und Weise:

Wenn Sie .hover() auf das Element gesetzt, Sie zwei Funktionen, um es passieren kann. Der erste wird ausgelöst, wenn sich die Maus über dem Element befindet, der zweite wird ausgelöst, wenn die Maus ausgezogen wird.

Die erste Funktion kann das currentElementId (oder ein anderes Flag) setzen und die zweite Funktion wird das löschen. Auf diese Weise müssen Sie nur überprüfen, ob currentElementId leer ist.

+0

Kann die currentElementId wirklich erhalten, wenn das Element keinen Fokus hat? Nur durch Bewegen der Maus darüber? – thedp

+1

Sie können diese ID auf JEDEM Ereignis setzen, suchen Sie die Verwendung von FOCUS() hier: http://docs.jquery.com/Events/focus –

1

Sie können setTimeout('sleep', sleep_time) verwenden, um eine Funktion nach einer festgelegten Zeit aufzurufen.

Weisen Sie Event-Handler onmouseover und onmouseout zu.

Diese Handler ändern ein Flag, um zu prüfen, ob sich die Maus noch auf dem Element befindet.

Innerhalb der Schlaf-Funktion können Sie die Flagge überprüfen und einfach zurückgeben.

+2

Eine Sache zu beachten, ist, dass das 'onmouseover' Ereignis nicht ausgelöst wird, es sei denn Die Maus bewegt sich tatsächlich. Wenn sich die Maus des Benutzers weiterhin, aber über dem Element befindet, wird sie nicht ausgelöst.Korrigiere mich, wenn ich falsch liege, irgendjemand. – donut

+0

Sie sind fast 100% korrekt! Deshalb stelle ich die Frage. Ich habe versucht, mit 2 Ebenen von Hover und Mouseover zu spielen, aber dann habe ich gemerkt, was Sie gerade gesagt haben: Das Mouseover-Ereignis wird nur für die oberste Ebene ausgelöst. Und wenn ich die Maus nicht aus dem Element entferne und dann zu ihr zurückkehre, wird das Ereignis nicht erneut ausgelöst. Also die Hauptfrage hier, wie kann ich dieses lästige Problem lösen? – thedp

10

Verwenden Sie einfach eine Flagge, um Ihnen zu sagen, ob die Maus darüber ist.

var mouseover = false; 
$('.thing').mouseenter(function(){ 
    mouseover = true; 
}).mouseleave(function(){ 
    mouseover = false; 
}); 
+0

ziemlich genau das, was ich gesagt habe. –

+0

Es hat immer noch das gleiche Problem, das ich in meinen schlechten Versuchen habe: Ich will in der Lage sein zu sagen, ob die Maus nach dem Timeout noch da ist, und wenn es nicht über dem Element ist, dann tu nichts. – thedp

+0

if (mouseover) {// dann etwas tun, das weiß, dass die Maus über dem Objekt ist} – PetersenDidIt

37

Dies scheint zu funktionieren (http://jsbin.com/uvoqe)

$("#hello").hover(function() { 
    $(this).data('timeout', setTimeout(function() { 

    alert('You have been hovering this element for 1000ms'); 

    }, 1000)); 
}, function() { 

    clearTimeout($(this).data('timeout')); 

}); 
+6

Dies ist ein kluger/klarer Weg als mit einem Plugin –

+0

Clever Lösung in der Tat. –

+1

brilliant. Sie können auch ein zweites Timeout für die Funktion "Unhover" hinzufügen, um das Ereignis zu verzögern, damit sich ein Slide-Out-Menü nicht zu schnell schließt. – pbarney

1

ich einen Hyperlink verwendet, um eine div zu zeigen und dann auf hover Ereignis habe ich die Zeit Eigenschaft dieser und sobald ich zu meinem div ich klar die Timeout und starten Sie mit der div Funktion zum Ausblenden der div. Ich hoffe, dies wird dir helfen.

<script type="text/javascript"> 
    $(document).ready(function() { 
     var obj; 
     $("a").hover(function() { 
      if ($("#div1").is(":hidden")) { 
       $("#div1").fadeIn(300).show(); 
      } 
     }, function() { 
      obj = setTimeout("jQuery('#div1').fadeOut(300);", 300); 
     }); 

     $("#div1").hover(function() { 
      clearTimeout(obj); 
      if ($("#div1").is(":hidden")) { 

       $("#div1").show(); 
      } 
     }, function() { 
      jQuery('#div1').fadeOut(300); 
     }); 
    }); 
</script>