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

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

谢谢

更新 在回答问题时：

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

---

如果您不介意使用jQuery--

使用此问题中的技巧----在鼠标移动到新元素上时触发更新

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

---

元素的数量将是数组的长度+1（元素本身）。如果你不想数

和

，那么你可以减去两个。

使用普通JavaScript有时会很乏味。我使用了以下函数来查找元素的

div

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

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存在一些跨浏览器问题，因此我修改了源代码。理想情况下，我们可以将该代码用作插件，但在他设置插件的方式中出现了一些问题。不过，他的跨浏览器解决方案的基本原理是可靠的。为要计算子元素父元素的基元素创建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;
    });
}

---

这将返回元素的父元素数（不包括元素本身，包括

和

）。

只需获取元素的父元素数。您介意使用jQuery吗？这应该“向上”多远，根节点（

html

）还是

正文

。。？你们开始做什么了吗？谢谢大家-请看编辑，答案使用jQuery'

.live（）

，这在jQuery 1.7中已经被弃用了。如果您想这样做，请改用

.on（）

，但我要提醒您不要将事件处理程序附加到页面上的每个元素上-这可能会使响应性能相当低下，尤其是当页面上有大量元素时。