如何检查光标是否位于某个元素上？

如何使用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

如何检查光标是否位于某个元素上？

回答

相关问题