Javascript 如何检查光标是否在元素上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3395293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if the cursor is over an element?
提问by Max Frai
How can I check whether the cursor is over a divon the html page with JQuery/Javascript?
如何div使用 JQuery/Javascript检查光标是否在html 页面上的a上？
I'm trying to get cursor coordinates to see if they are in the rectangle of my element. Maybe there are predefined methods?
我正在尝试获取光标坐标以查看它们是否在我元素的矩形中。也许有预定义的方法？
UPD, don't say anything about hoverevents, etc. I need some method which will return true/false for some element at the page, like:
UPD，不要说任何关于hover事件等的事情。我需要一些方法来为页面上的某些元素返回真/假，例如：
var result = underElement('#someDiv'); // true/false
采纳答案by Ramuns Usovs
I'm not really sure why you wish to avoid hover so badly: consider the following 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
}
});
Basically the idea is that you use hover to set a flag on the element that the mouse is over it/no longer over it. And then you write a function that checks for that flag.
基本上这个想法是你使用悬停在元素上设置一个标志，鼠标在它上面/不再在它上面。然后编写一个函数来检查该标志。
回答by Alexander
For the sake of completeness I will add a couple of changes that I believe will help a bit for performance.
为了完整起见，我将添加一些我认为对性能有所帮助的更改。
Use delegation to bind the event to one element, instead of binding it to all existent elements.
$(document).on({ mouseenter: function(evt) { $(evt.target).data('hovering', true); }, mouseleave: function(evt) { $(evt.target).data('hovering', false); } }, "*");Add a jQuery pseudo-expression
:hovering.jQuery.expr[":"].hovering = function(elem) { return $(elem).data('hovering') ? true : false; };
使用委托将事件绑定到一个元素，而不是将其绑定到所有存在的元素。
$(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; };
Usage:
用法：
var isHovering = $('#someDiv').is(":hovering");
回答by fearofawhackplanet
The simplest way would probably be to just track which element the mouse is over at all times. Try something like:
最简单的方法可能是始终跟踪鼠标悬停在哪个元素上。尝试类似：
<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);
});
});
and then your function is simply
然后你的功能很简单
function mouseIsOverElement(elemId) {
return elemId === $('#mouseTracker').val();
}
回答by Jean-Philippe Gire
Can't you just check $(select).is(':hover') ?
你不能只检查 $(select).is(':hover') 吗？
回答by domagojk
I did this with custom function:
我用自定义函数做到了这一点：
$(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))
}
