0

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

谢谢

更新 回答问题:

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

3 回答 3

0

我遇到了一个使用 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>and <html>)。

于 2013-07-25T07:08:06.437 回答
0

使用纯 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 数量的问题。

于 2013-07-25T06:30:20.133 回答
0

如果你不介意使用 jQuery——

使用这个问题中的技术——jQuery:如何获取光标下的元素?-- 每当鼠标移到新元素上时触发更新。

然后你可以使用这个查询方法—— .parents() ——来获取元素所有父元素的数组。

元素的数量将是数组的长度 + 1(元素本身)。如果你不想数<html><body>那么你可以减去两个。

于 2013-07-25T06:05:22.060 回答