¿Cómo comprobar si el cursor está sobre un elemento?

Question

¿Cómo puedo verificar si el cursor está sobre un div en la página html con JQuery/Javascript?

Estoy tratando de obtener las coordenadas del cursor para ver si están en el rectángulo de mi elemento. Tal vez hay métodos predefinidos?

UPD, no dicen nada acerca de hover eventos, etc. Necesito algún método que devolverá verdadero/falso de algún elemento en la página, como:

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

Answer 1

No estoy realmente seguro de por qué desea evitar la libración tan mal: considerar la siguiente secuencia de comandos

$(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 
    } 
}); 

Básicamente, la idea es que se utiliza vuelo estacionario a establecer un indicador en el elemento que el ratón está sobre ella/ya no sobre ella. Y luego escribes una función que busca esa bandera.

Answer 2

La manera más sencilla sería simplemente seguir qué elemento está el mouse en todo momento. Pruebe algo como:

<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); 
    }); 
}); 

y entonces su función es simplemente

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

Answer 3

¿No puedes comprobar $ (seleccionar) .es (': hover')?

Answer 4

Lo hice con función personalizada:

$(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

En aras de la exhaustividad añadiré un par de cambios que creo que va a ayudar un poco para el rendimiento.

1. Utilice la delegación para vincular el evento a un elemento, en lugar de vincularlo a todos los elementos existentes.

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

2. Añadir un jQuery pseudo-expresión :hovering.

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

Uso:

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