大家好,对于一个位于网站顶部并允许向用户指示某些元素的深度的 JS 应用程序,我将如何计算位于给定位置的鼠标下方的 div 的数量?
谢谢
更新 回答问题:
- jQuery 或其他库对我来说很好。
- 虽然我已经有了鼠标跟踪代码,但还没有开始。
大家好,对于一个位于网站顶部并允许向用户指示某些元素的深度的 JS 应用程序,我将如何计算位于给定位置的鼠标下方的 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>
and <html>
)。
使用纯 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 数量的问题。
如果你不介意使用 jQuery——
使用这个问题中的技术——jQuery:如何获取光标下的元素?-- 每当鼠标移到新元素上时触发更新。
然后你可以使用这个查询方法—— .parents() ——来获取元素所有父元素的数组。
元素的数量将是数组的长度 + 1(元素本身)。如果你不想数<html>
,<body>
那么你可以减去两个。