如何检查光标是不是在元素上? [复制]

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 是这里的跨浏览器选项,mouseovermouseenter 是最简单的跨浏览器保存方式悬停元素的轨迹。此外,您的措辞有点偏离,鼠标永远不会元素下,它在它。 如果你不使用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))
 

【讨论】:

以上是关于如何检查光标是不是在元素上? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

如何检查鼠标光标是不是在 Javafx 中的按钮上?

如何检查 HTML 元素是不是隐藏? [复制]

如何检查附加元素是不是已存在? [复制]

如何检查光标是不是存在(打开状态)

WebDriver:检查元素是不是存在? [复制]

如何检查是不是有任何 JavaScript 事件侦听器/处理程序附加到元素/文档? [复制]