Javascript计算鼠标移动时鼠标指针下的元素数

Javascript calculate the number of elements under the mouse pointer as the mouse moves

本文关键字：元素 鼠标指针 计算 鼠标 移动 Javascript      更新时间：2023-09-26

大家好，对于一个位于网站顶部并允许向用户指示某些元素的深度的JS应用程序，我该如何计算鼠标下给定位置的div数量？

感谢

更新回答问题：

  • jQuery或其他库对我来说很好
  • 虽然我已经有了鼠标跟踪代码，但还没有开始

如果您不介意使用jQuery--

使用这个问题中的技术——jQuery：如何获取光标下的元素？——以在鼠标移动到新元素上时触发更新。

然后可以使用这个查询方法--parents（）--来获取元素的所有父元素的数组。

元素的数量将是数组的长度+1（元素本身）。如果你不想计算<html>和<body>，那么你可以减去2。

使用纯JavaScript有时会很乏味。我想出了以下函数来查找元素的divs的编号

下面是执行实际计数的递归函数

function getNumberOfDivs(elem) {
    console.log(elem.parentNode);
    if (elem.parentNode.tagName.toLowerCase() == 'body') return 0;
    if (elem.parentNode.tagName.toLowerCase() == 'div') 
       return 1 + getNumberOfDivs(elem.parentNode);
    return getNumberOfDivs(elem.parentNode);
}

以下函数使用getNumberOfDivs查找计数

function getDivCount() {
    var btn = document.getElementById("btn");
    var count = getNumberOfDivs(btn);
    alert(count);
}

希望这能解决您查找给定元素的div数的问题。

我发现了一个使用document.getElementFromPoint函数的解决方案。getElementFromPoint存在一些跨浏览器问题，因此我改编了http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/.理想情况下，我们可以将该代码用作插件，但他设置插件的方式出现了问题。不过，他的跨浏览器解决方案的基本原理是健全的。为要计算子元素的父元素的基元素创建mousemove事件处理程序，并使用如下的getElementFromPoint方法：

// if the browser doesn't support getElementFromPoint, you'll need another solution 
if (typeof(document.getElementFromPoint) != 'undefined') {
    // variables to save the checked and relative status
    var check = false;
    var isRelative = true;
    $(document).mousemove(function (e) {
        // get the viewport mouse position
        var x = e.clientX;
        var y = e.clientY;
        // if we haven't checked already, check whether or not the browser users
        // viewport or page coordinates for the elementFromPoint function
        if(!check) {
            var sl;
            if((sl = $(document).scrollTop()) > 0) {
                isRelative = (document.elementFromPoint(0, sl + $(window).height() -1) == null);
            }
            else if((sl = $(document).scrollLeft()) > 0) {
                isRelative = (document.elementFromPoint(sl + $(window).width() -1, 0) == null);
            }
            check = (sl > 0);
        }
        // if the browser uses page coordinates, add in the scroll offset
        if(!isRelative) {
            x += $(document).scrollLeft();
            y += $(document).scrollTop();
        }
        // get the element at the mouse coordinates
        var element = document.elementFromPoint(x,y);
        // get number of parent elements
        var numParents = $(element).parents().length;
    });
}

这将返回元素的父元素数（不包括元素本身，包括<body>和<html>）。

相关文章：