Как проверить, находится ли курсор над элементом?

Как проверить, находится ли курсор над div на странице html с помощью JQuery/Javascript?

Я пытаюсь получить координаты курсора, чтобы увидеть, находятся ли они в прямоугольнике моего элемента. Возможно, существуют предопределенные методы?

UPD, ничего не говорим о событиях hover и т.д. Мне нужен какой-то метод, который вернет true/false для некоторого элемента на странице, например:

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

Ответы

Ответ 1

Я не уверен, почему вы хотите избежать зависания так: рассмотрите следующие script

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

В принципе, идея заключается в том, что вы используете зависание, чтобы установить флаг элемента, над которым мышь над ним/больше не над ним. И тогда вы пишете функцию, которая проверяет этот флаг.

Ответ 2

Для полноты я добавлю пару изменений, которые, я считаю, немного помогут в производительности.

Используйте делегирование для привязки события к одному элементу вместо привязки его ко всем существующим элементам.
```
$(document).on({
  mouseenter: function(evt) {
    $(evt.target).data('hovering', true);
  },
  mouseleave: function(evt) {
    $(evt.target).data('hovering', false);
  }
}, "*");
```

Добавить псевдо-выражение jQuery :hovering.

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

Использование:

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

Ответ 3

Самый простой способ, вероятно, состоял бы в том, чтобы просто отслеживать, на каком элементе мышь все время. Попробуйте что-то вроде:

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

а затем ваша функция просто

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

Ответ 4

Не можете ли вы просто проверить $(select).is(': hover')?

Ответ 5

Я сделал это с пользовательской функцией:

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