如何检查光标是不是在元素上? [复制]
Posted
技术标签:
【中文标题】如何检查光标是不是在元素上? [复制]【英文标题】:How to check if the cursor is over an element? [duplicate]如何检查光标是否在元素上? [复制] 【发布时间】:2011-03-24 15:26:42 【问题描述】:如何使用 JQuery/javascript 检查光标是否位于 html 页面上的 div
上?
我正在尝试获取光标坐标以查看它们是否在我的元素的矩形中。也许有预定义的方法?
UPD,不要说hover
事件等。我需要一些方法来为页面上的某些元素返回真/假,例如:
var result = underElement('#someDiv'); // true/false
【问题讨论】:
不管你想要做什么,hover
是这里的跨浏览器选项,mouseover
或 mouseenter
是最简单的跨浏览器保存方式悬停元素的轨迹。此外,您的措辞有点偏离,鼠标永远不会在元素下,它在在它。
如果你不使用hover,你怎么知道鼠标进入了你的那个框?...
@Reigel,查看鼠标坐标,查看 div 位置。
I contributed a pseudo-expression for it hoping that that helps someone though
@NickCraver:检查光标坐标可能是必要的。例如,如果您添加一个位于光标下方的元素,则在用户移动鼠标之前,不会在该元素上触发 mouseover
/mouseenter
事件。
【参考方案1】:
我不太确定你为什么要避免如此严重的悬停:考虑以下脚本
$(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
);
基本上这个想法是你使用悬停在元素上设置一个标志,鼠标在它上面/不再在它上面。然后你编写一个函数来检查那个标志。
【讨论】:
+1 我非常喜欢这个解决方案。你最后不只需要return $(selector).data('hover');
吗?
这不是一个完整的答案:您如何初始化“悬停”?在指针进入或退出元素边界之前,“悬停”是未知的。
啊,我的错;为了解决这个问题,假设指针在初始化时位于元素之外。 “悬停”将在指针在元素上的每次移动时触发,而不仅仅是在输入时。尽管这仍然留下了非常小的情况,即需要知道指针在初始化时的位置而不移动它。不过不是我的问题。
这是我所缺少的拼图中该死的一块。加上mouseleave而不是mouseout,我觉得我开始获得对悬停事件的控制。
您可能想要限制这些功能,在包含大量元素的页面上实现此功能时可能会导致性能问题。众所周知,*
选择器很慢,启动大量侦听器会使情况变得更糟。【参考方案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') 吗?
【讨论】:
拒绝投票可以节省人们的时间,因为这个解决方案不再是 jQuery 1.8 和更新版本的选项。 jQuery 1.8 已弃用.is(':hover')
: ***.com/a/12517725/5295.【参考方案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))
【讨论】:
以上是关于如何检查光标是不是在元素上? [复制]的主要内容,如果未能解决你的问题,请参考以下文章