Wie kann ich überprüfen, ob die Maus über ein Element in jQuery ist?

StackOverflow https://stackoverflow.com/questions/1273566

  •  16-09-2019
  •  | 
  •  

Frage

Gibt es eine schnelle und einfache Möglichkeit, dies in jQuery zu tun, dass ich fehle?

Ich will nicht das Mouseover-Ereignis verwenden, weil ich es schon für etwas anderes verwenden bin. Ich muß nur wissen, ob die Maus über ein Element zu einem bestimmten Zeitpunkt.

Ich mag so etwas tun, wenn es doch nur eine „IsMouseOver“ Funktion: 

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
War es hilfreich?

Lösung

Stellen Sie einen Timeout auf dem mouseout Fadeout und speichert den Rückgabewert auf Daten im Objekt. Dann Onmouseover, brechen Sie den Timeout, wenn es einen Wert in dem Daten vorhanden sind.

Entfernen Sie die Daten auf Rückruf des fadeout.

Es ist eigentlich weniger teuer MouseEnter- / mouseleave zu verwenden, da sie für das Menü nicht feuern, wenn Kinder / mouseout Feuers Maus darüber geht.

Andere Tipps

Dieser Code zeigt, was happytime harry und ich versuchen zu sagen. Wenn die Maus eintritt, kommt ein Tooltip aus, wenn sich die Maus überlässt es eine Verzögerung setzt es zu verschwinden. Wenn die Maus das gleiche Element eintritt, bevor die Verzögerung ausgelöst wird, dann zerstören wir den Auslöser, bevor er die Daten, die wir vor der Lagerung mit erlischt. 

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});

Ein sauberer und eleganter Hover-Check: 

if ($('#element:hover').length != 0) {
    // do something ;)
}

ACHTUNG: is(':hover') wird in jquery veraltet 1.8+. Siehe diesen Beitrag für eine Lösung .

Sie können auch diese Antwort verwenden: https://stackoverflow.com/a/6035278/8843 zu testen, ob die Maus ist ein Element schweben: 

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

Sie können jQuery hover Ereignis verwenden, den Überblick zu behalten manuell: 

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

Ich brauchte etwas, genau wie diese (in etwas komplexeren Umgebung und die Lösung mit einer Menge von ‚mouseenters‘ und ‚mouseleaves‘ funktionierte nicht richtig), so habe ich ein wenig jQuery-Plugin, das die Methode IsMouseOver hinzufügt. Es hat funktioniert ziemlich gut so weit. 

//jQuery ismouseover  method
(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

Dann an einer beliebigen Stelle des Dokuments yo es so nennen, und es gibt wahr oder falsch: 

$("#player").ismouseover()

Ich habe es getestet auf IE7 +, Chrome 1+ und Firefox 4 und ordnungsgemäß funktioniert.

In jQuery können Sie .is verwenden ( ': hover'), so 

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

wäre jetzt die knappste Art und Weise die Funktion im OP verlangt, um.

Hinweis: Die oben funktioniert nicht in IE8 oder weniger

Als weniger prägnant Alternative, die Arbeit in IE8 tut (wenn ich IE8 modus des IE9 vertrauen kann), und zwar ohne $(...).hover(...) überall Triggerung noch erfordert einen Selektor für das Element zu kennen (in diesem Fall Ivo Antwort ist einfacher) : 

function IsMouseOver(oi)
{
    return oi.length && 
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}

Da ich nicht kommentieren kann, so werde ich dies als eine Antwort schreiben!

Bitte verstehen den Unterschied zwischen CSS-Selektor ": schweben!" Und dem Hover-Ereignisse

„: hover“ ist ein CSS-Selektor und wurde in der Tat mit dem Ereignisse entfernt, wenn wie dieser $("#elementId").is(":hover") verwendet, aber in er bedeutet es hat wirklich nichts mit dem jQuery Ereignisse schweben zu tun.

Wenn Sie $("#elementId:hover") codieren, wird das Element nur dann gewählt werden, wenn Sie mit der Maus bewegen. die obige Aussage wird mit allen jQuery Versionen als Ihr Vorwählen dieses Element mit rein und echt css Auswahl arbeiten.

Auf der anderen Seite der Veranstaltung schweben, das ist 

$("#elementId").hover(
     function() { 
         doSomething(); 
     }
);

ist in der Tat deprecaded wie jQuery 1.8 hier der Zustand von jQuery Website:

  

Wenn die Ereignisnamen „schweben“ verwendet wird, wandelt das Ereignis Subsystem es   zu „MouseEnter- mouseleave“ in der Ereigniszeichenfolge. Das ist ärgerlich für   mehrere Gründe:

     

Semantics: Schweben ist nicht das gleiche wie die Maus ein- und ausgeh   ein Element, bedeutet es eine gewisse Menge an Verlangsamung oder Verzögerung vor   Brennen. Name des Ereignisses: Der event.type durch den beigefügten Handler zurückgegeben wird   schweben nicht, aber entweder MouseEnter- oder mouseleave. Keine andere Veranstaltung tut   diese. Kooptieren den „schweben“ name: Es ist nicht möglich, ein befestigen   Veranstaltung mit dem Namen „schweben“ und feuern sie mit .trigger ( „schweben“). Das   docs nennen diesen Namen bereits „stark für neuen Code entmutigt“, würde ich   wie es für 1,8 und schließlich entfernen Sie es offiziell verbitten.

Warum sie die Nutzung ist ( „: schweben“) entfernt. Ist unklar, aber na ja, man kann es immer noch wie oben verwenden und hier ist ein wenig Hack immer noch verwenden 

(function ($) {
   /** 
    * :hover selector was removed from jQuery 1.8+ and cannot be used with .is(":hover") 
    * but using it in this way it works as :hover is css selector! 
    *
    **/
    $.fn.isMouseOver = function() {
        return $(this).parent().find($(this).selector + ":hover").length > 0;
    };
})(jQuery);

Oh und I würde recomment nicht die Timeout-Version, da dies bringt eine Menge Komplexität , sondern Timeout Funktionalitäten für diese Art von Sachen, wenn es keine andere Möglichkeit gibt und glaubt ich, in 95% Prozent aller Fälle gibt es eine andere Art und Weise

Hope ich ein paar Leute da draußen helfen könnte.

Greetz Andy

Danke an euch beide. Irgendwann musste ich versuchen, aufgeben zu erkennen, ob sich die Maus noch über das Element war. Ich weiß, es ist möglich, kann aber zu viel Code erfordern zu erreichen.

Es dauerte eine Weile, aber ich habe Ihre beiden Vorschläge und kam mit etwas, das für mich funktionieren würde.

Hier ist eine vereinfachte (aber funktional) Beispiel: 

$("[HoverHelp]").hover (
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).css("top", $(this).position().top + 25);
        $(HelpID).css("left", $(this).position().left);
        $(HelpID).attr("fadeout", "false");
        $(HelpID).fadeIn();
    },
    function () {
        var HelpID = "#" + $(this).attr("HoverHelp");
        $(HelpID).attr("fadeout", "true");
        setTimeout(function() { if ($(HelpID).attr("fadeout") == "true") $(HelpID).fadeOut(); }, 100);
    }
);

Und dann diese Arbeit zu machen auf einem Text das ist alles, was ich zu tun habe: 

<div id="tip_TextHelp" style="display: none;">This help text will show up on a mouseover, and fade away 100 milliseconds after a mouseout.</div>

This is a <span class="Help" HoverHelp="tip_TextHelp">mouse over</span> effect.

Zusammen mit viel Phantasie CSS ermöglicht dies einige sehr schöne Mouseover-Hilfe Tooltips. By the way, ich brauchte die Verzögerung bei der mouseout wegen winziger Lücken zwischen Kontrollkästchen und Text, der die Hilfe wurde zu blinken beginnt, wie Sie die Maus über bewegen. Aber das funktioniert wie ein Charme. Ich habe auch etwas Ähnliches für die Fokus / Unschärfe Ereignisse.

Ich sehe Timeouts für diese viel verwendet, aber im Rahmen einer Veranstaltung, können Sie sich nicht an den Koordinaten, wie folgt aus:? 

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

je nach dem Kontext, können Sie sicher vornehmen müssen (dies == e.target) vor dem Aufruf areXYInside (e).

FYI ich an mit diesem Ansatz in einem Dragleave-Handler, um suchen, um zu bestätigen, dass das Dragleave-Ereignis nicht, indem Sie in ein untergeordnetes Element ausgelöst wurde. Wenn Sie nicht irgendwie überprüfen, dass Sie noch innerhalb des übergeordneten Elements sind, könnten Sie fälschlicherweise Maßnahmen ergreifen, die für nur gemeint ist, wenn Sie wirklich die Eltern verlassen.

EDIT: Das ist eine nette Idee, ist aber nicht konsequent genug arbeiten. Vielleicht mit einigen kleinen Verbesserungen.

Sie können mit jQuery testen, ob jedes Kind div eine bestimmte Klasse hat. Dann wird durch die Klasse der Anwendung, wenn Sie die Maus über die und aus aus einem bestimmten div, können Sie testen, ob Sie die Maus über sie ist, auch wenn Sie die Maus über ein anderes Element auf der Seite viel weniger Code auf diese Weise. Früher habe ich das, weil ich Räume zwischen divs in einem Pop-up hatte, und ich wollte nur das Popup schließen, wenn ich aus dem Pop-up bewege, nicht, wenn ich meine Maus in dem Pop-up über die Räume bewegt. Also rief ich eine Mouseover-Funktion auf dem Inhalt div (die das Pop-up vorbei war), aber es würde nur die enge Funktion auslösen, wenn ich moused über den Inhalt div und war außerhalb des Pop-up! 

$(".pop-up").mouseover(function(e)
    {
    $(this).addClass("over");
    });

$(".pop-up").mouseout(function(e)
    {
    $(this).removeClass("over");
    });


$("#mainContent").mouseover(function(e){
            if (!$(".expanded").hasClass("over")) {
            Drupal.dhtmlMenu.toggleMenu($(".expanded"));
        }
    });

Dies wäre der einfachste Weg, es zu tun! 

  function(oi) 
  {
   if(!$(oi).is(':hover')){$(oi).fadeOut(100);}
  }

Hier ist eine Technik, die nicht auf jquery angewiesen und nutzt die nativen DOM matches API . Es verwendet Anbieter Präfixe Browser zu unterstützen IE9 zurück. Siehe matchesselector auf caniuse.com für weitere Informationen.

Erstellen Sie zunächst die matchesSelector Funktion, etwa so: 

var matchesSelector = (function(ElementPrototype) {
var fn = ElementPrototype.matches ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.mozMatchesSelector ||
          ElementPrototype.msMatchesSelector;

return function(element, selector) {
  return fn.call(element, selector);
};

})(Element.prototype);

Dann erkennen schweben: 

var mouseIsOver = matchesSelector(element, ':hover');

Ich habe dies in einer anderen Frage beantwortet, mit allen Details, die Sie müssen:

erkennen, ob über das Element mit jQuery schweben (hat 99 upvotes zum Zeitpunkt des Schreibens)

Im Grunde kann man so etwas tun: 

var ishovered = oi.is(":hover");

Dies funktioniert nur, wenn oi ist ein jQuery-Objekt ein einzelnes Element enthält. Wenn mehrere Elemente aufeinander abgestimmt sind, müssen Sie für jedes Element anwenden, zum Beispiel: 

var hoveredItem = !!$('ol>li').filter(function() { return $(this).is(":hover"); });
                  // not .filter(':hover'), as we can't apply :hover on multiple elements

Dies wurde jQuery 1.7 getestet starten.

Die Ausweitung auf das, was ‚happytime Harry‘, sagte, sollten Sie die .data () jQuery-Funktion verwenden, um die Timeout-ID zu speichern. Dies ist so, dass Sie die Timeout-ID abrufen kann sehr einfach, wenn die ‚MouseEnter-‘ später am selben Element ausgelöst wird, so dass Sie den Auslöser für die Tooltip zu beseitigen, zu verschwinden.

Sie können jQuery MouseEnter- und Leave Ereignisse verwenden. Sie können ein Flag gesetzt, wenn die Maus, um den gewünschten Bereich und Nicht festgelegt, die die Flagge eintritt, wenn sie den Bereich verlässt.

I kombinierten Ideen aus diesem Thema und kam mit dieser, die für Ein- / Ausblenden ein Untermenü nützlich ist: 

$("#menu_item_a").mouseenter(function(){
   clearTimeout($(this).data('timeoutId'));
   $("#submenu_a").fadeIn("fast");
}).mouseleave(function(){
   var menu_item = $(this);

   var timeoutId = setTimeout(function(){
      if($('#submenu_a').is(':hover'))
      {
        clearTimeout(menu_item.data('timeoutId'));
      }
      else
      {
        $("#submenu_a").fadeOut("fast");
      }
   }, 650);

    menu_item.data('timeoutId', timeoutId); 
});

 $("#submenu_a").mouseleave(function(){
   $(this).fadeOut("fast");
 });

Es scheint, für mich zu arbeiten. Hoffe, das hilft jemand.

EDIT:. Nun ist diese Vorgehensweise zu realisieren ist nicht richtig im IE arbeitet

Ich konnte nicht über eine der Vorschläge verwenden.
Warum ziehe ich meine Lösung?
Diese Methode überprüft, ob die Maus über ein Element auf ist jeder von Ihnen gewählten Zeit .
MouseEnter- und . Hover sind cool, aber MouseEnter- löst nur, wenn Sie die Maus bewegen, nicht, wenn das Element bewegt sich unter der Maus
: Hover ist ziemlich süß, aber ... IE

Also ich dies tun:

Nein 1. Speicher Maus x, y-Position jedes Mal bewegt wird, wenn Sie brauchen,
Nein 2. überprüfen, ob die Maus über einem der Elemente ist, die die Abfrage tun Sachen passen ... wie ein MouseEnter- Ereignis auslösen 

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

Nur eine Notiz über die beliebte und hilfreich Arthur Goldsmith oben Antwort: Wenn Sie Ihre Maus von einem Element zum anderen in IE (zumindest bis IE 9) Bewegen Sie einige Probleme haben, kann dies immer, wenn die neue richtig arbeiten Element weist einen transparenten Hintergrund (die es würde Standard). Meine Abhilfe wurde das gibt das neue Elemente ein transparenten Hintergrund Bild. 

$(document).hover(function(e) {
    alert(e.type === 'mouseenter' ? 'enter' : 'leave');
});

FIDDLE

Dies ist eine Funktion, die Ihnen hilft, zu überprüfen, ob die Maus innerhalb eines Elements ist oder nicht. Das einzige, was Sie tun sollten, um die Funktion aufzurufen, wo Sie eine Live-Maus-assoziierte Eventobject haben kann. so etwas wie folgt aus: 

$("body").mousemove(function(event){
     element_mouse_is_inside($("#mycontainer", event, true, {});
});

Sie können den Quellcode hier in Github oder am unteren Rand der Post sehen:

https://github.com/mostafatalebi/ElementsLocator/blob/ Master / elements_locator.jquery.js 

function element_mouse_is_inside  (elementToBeChecked, mouseEvent, with_margin, offset_object)
{
    if(!with_margin)
    {
        with_margin = false;
    }
    if(typeof offset_object !== 'object')
    {
        offset_object = {};
    }
    var elm_offset = elementToBeChecked.offset();
    var element_width = elementToBeChecked.width();
    element_width += parseInt(elementToBeChecked.css("padding-left").replace("px", ""));
    element_width += parseInt(elementToBeChecked.css("padding-right").replace("px", ""));
    var element_height = elementToBeChecked.height();
    element_height += parseInt(elementToBeChecked.css("padding-top").replace("px", ""));
    element_height += parseInt(elementToBeChecked.css("padding-bottom").replace("px", ""));
    if( with_margin)
    {
        element_width += parseInt(elementToBeChecked.css("margin-left").replace("px", ""));
        element_width += parseInt(elementToBeChecked.css("margin-right").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-top").replace("px", ""));
        element_height += parseInt(elementToBeChecked.css("margin-bottom").replace("px", ""));
    }

    elm_offset.rightBorder = elm_offset.left+element_width;
    elm_offset.bottomBorder = elm_offset.top+element_height;

    if(offset_object.hasOwnProperty("top"))
    {
        elm_offset.top += parseInt(offset_object.top);
    }
    if(offset_object.hasOwnProperty("left"))
    {
        elm_offset.left += parseInt(offset_object.left);
    }
    if(offset_object.hasOwnProperty("bottom"))
    {
        elm_offset.bottomBorder += parseInt(offset_object.bottom);
    }
    if(offset_object.hasOwnProperty("right"))
    {
        elm_offset.rightBorder += parseInt(offset_object.right);
    }
    var mouseX = mouseEvent.pageX;
    var mouseY = mouseEvent.pageY;

    if(  (mouseX > elm_offset.left && mouseX < elm_offset.rightBorder)
        && (mouseY > elm_offset.top && mouseY < elm_offset.bottomBorder) )
    {
        return true;
    }
    else
    {
        return false;
    }
}

Sie können is(':visible'); in jQuery Und für $ ( 'Artikel: Hover'). Es arbeitet in JQuery auch

Dies ist ein htm Code snnipet: 

    <li class="item-109 deeper parent">
<a class="root" href="/Comsopolis/index.php/matiers"><span>Matiers</span></a>
<ul>
<li class="item-110 noAff">
<a class=" item sousMenu" href="/Comsopolis/index.php/matiers/tsdi">
<span>Tsdi</span>
</a>
</li>
<li class="item-111 noAff">
<a class="item" href="/Comsopolis/index.php/matiers/reseaux">
<span>Réseaux</span>
</a>
</li>
</ul>
</li>

und das ist der JS-Code: 

$('.menutop > li').hover(function() {//,.menutop li ul

    $(this).find('ul').show('fast');

},function() {
    if($(this).find('ul').is(':hover'))
    $(this).hide('fast');

});

 $('.root + ul').mouseleave(function() {
    if($(this).is(':visible'))
    $(this).hide('fast');

});

das, was ich sprach:)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top