Jak sprawdzić, czy kursor znajduje się nad elementem?

Question

Jak mogę sprawdzić, czy kursor znajduje się ponad div na stronie html z JQuery/Javascript?

Próbuję uzyskać współrzędne kursora, aby zobaczyć, czy są one w prostokącie mojego elementu. Może istnieją predefiniowane metody?

UPD, nie mów nic o hover imprez itp Potrzebuję metodę, która zwróci true/false jakiegoś elementu na stronie, takich jak:

var result = underElement('#someDiv'); // true/false 

Answer 1

Nie jestem pewien, dlaczego chcesz uniknąć najechania kursorem tak źle: Rozważmy następujący scenariusz

$(function(){ 

    $('*').hover(function(){ 
     $(this).data('hover',1); //store in that element that the mouse is over it 
    }, 
    function(){ 
     $(this).data('hover',0); //store in that element that the mouse is no longer over it 
    }); 


    window.isHovering = function (selector) { 
     return $(selector).data('hover')?true:false; //check element for hover property 
    } 
}); 

Zasadniczo chodzi o to, że używasz najechania kursorem aby ustawić flagę na elemencie że mysz jest nad nim/nie nad nim. A następnie piszesz funkcję, która sprawdza tę flagę.

Answer 2

Najprostszym sposobem będzie po prostu śledzenie, który element myszki jest przez cały czas. Spróbuj czegoś takiego:

<div id="1" style="border:solid 1px red; width:50px; height:50px;"></div> 
<div id="2" style="border:solid 1px blue; width:50px; height:50px;"></div> 
<div id="3" style="border:solid 1px green; width:50px; height:50px;"></div> 

<input type="hidden" id="mouseTracker" /> 

​$(document).ready(function() { 
    $('*').hover(function() { 
     $('#mouseTracker').val(this.id); 
    }); 
}); 

i wówczas funkcja jest po prostu

function mouseIsOverElement(elemId) { 
    return elemId === $('#mouseTracker').val(); 
} 

Answer 3

nie można po prostu sprawdzić $ (wybierz) .is (': hover')?

Answer 4

Zrobiłem to z funkcji niestandardowej:

$(document).mouseup(function(e) { 
    if(UnderElement("#myelement",e)) { 
     alert("click inside element"); 
    } 
}); 

function UnderElement(elem,e) { 
    var elemWidth = $(elem).width(); 
    var elemHeight = $(elem).height(); 
    var elemPosition = $(elem).offset(); 
    var elemPosition2 = new Object; 
    elemPosition2.top = elemPosition.top + elemHeight; 
    elemPosition2.left = elemPosition.left + elemWidth; 

    return ((e.pageX > elemPosition.left && e.pageX < elemPosition2.left) && (e.pageY > elemPosition.top && e.pageY < elemPosition2.top)) 
} 

Answer 5

Dla uzupełnienia dodam kilka zmian, które moim zdaniem pomoże trochę na wydajności.

1. Użyj delegacji, aby powiązać zdarzenie z jednym elementem, zamiast powiązać go ze wszystkimi istniejącymi elementami.

   $(document).on({ 
       mouseenter: function(evt) { 
       $(evt.target).data('hovering', true); 
       }, 
       mouseleave: function(evt) { 
       $(evt.target).data('hovering', false); 
       } 
   }, "*"); 
   

2. Dodać jQuery pseudo ekspresję :hovering.

   jQuery.expr[":"].hovering = function(elem) { 
       return $(elem).data('hovering') ? true : false; 
   }; 
   

Zastosowanie:

var isHovering = $('#someDiv').is(":hovering");