如何檢查光標是否位於某個元素上？

如何使用JQuery/Javascript檢查光標是否在HTML頁面上的div？如何檢查光標是否位於某個元素上？

我想獲得遊標座標，看看他們是否在我的元素的矩形。也許有預定義的方法？

UPD，不說任何關於hover事件等。我需要一些方法，會在頁面返回true/false爲一些元素，如：

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

來源

2010-08-03 Ockonal

不管你想* *頭，'hover'是跨瀏覽器選項這裏，'mouseover'或'mouseenter'是最簡單的交叉瀏覽器的方式來跟蹤懸停的元素。你的措辭也有點不合適，鼠標永遠不會*在一個元素下面，它在*之上。 – 2010-08-03 09:52:38

如果你不會使用懸停，你怎麼知道鼠標輸入你的那個盒子？ – Reigel 2010-08-03 09:52:51

@Reigel，看看鼠標座標並看看div的位置。 – Ockonal 2010-08-03 09:53:55

我真的不知道爲什麼你希望避免懸停如此糟糕：考慮下面的腳本

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

基本上想法是，你使用懸停設置一個標誌元素上，該鼠標在它/不再超過它。然後你寫一個函數來檢查那個標誌。

來源

2010-08-03 11:03:19

+1我很喜歡這個解決方案。難道你不需要'返回$（選擇器）.data（'懸停'）;'在最後？ – fearofawhackplanet 2010-08-03 11:11:12

這不是一個完整的答案：你如何初始化'懸停'開始？直到指針進入或退出元素的邊界，'懸停'是未知的。 – worldsayshi 2012-11-19 09:46:16

啊，我的不好;爲了解決這個問題，假定指針在初始化時位於元素之外。指針在元素上的每次移動都會觸發'懸停'，而不僅僅是輸入。雖然這仍然留下了非常小的情況，需要知道指針在初始化的位置而不移動它。雖然我的問題不是。 – worldsayshi 2012-11-19 09:55:07

最簡單的方法可能是隨時跟蹤鼠標結束的元素。嘗試是這樣的：

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

來源

2010-08-03 11:06:38 fearofawhackplanet

你就不能檢查$（選擇）。是（ '：懸停'）？

來源

2011-06-28 17:17:00

這不適用於Opera。 – Skay 2012-04-17 15:34:42

或小於ie9 – ajbeaven 2012-12-03 01:58:42

Downvoting節省時間，因爲這個解決方案不再是jQuery 1.8和更新的選項。 jQuery 1.8棄用'.is（'：hover'）'：http://stackoverflow.com/a/12517725/5295。 – avernet 2013-08-10 00:34:26

我這樣做是與自定義函數：

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

來源

2012-12-18 21:16:46 domagojk

爲了完整起見，我將增加一對夫婦，我相信會有點幫助的性能變化。

使用委託將事件綁定到一個元素，而不是綁定到所有存在的元素。

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

來源

2012-12-18 22:02:37 Alexander

如何檢查光標是否位於某個元素上？

回答

相關問題