Javascript/jquery，获取 (x,y) 处的所有 div 位置。转发触摸？ [复制]答案

【问题标题】：Javascript/jquery, get all divs location at (x,y). Forwarding touches? [duplicate]Javascript/jquery，获取 (x,y) 处的所有 div 位置。转发触摸？ [复制]
【发布时间】：2023-03-23 00:15:01
【问题描述】：

可能重复：
How to get a list of all elements that resides at the clicked point?

我知道我可以使用document.elementFromPoint(x,y) 获得具有最高 z-index 的元素。

问题是我需要获取包含触摸事件位置的每个 div。

如何将触摸传播到下面的元素？

我看到了一些在重新生成事件时显示/隐藏元素的 hacky 解决方案，或者使用 css 的指针事件样式，但是我不能使用这些，它们可能会导致闪烁...

下图说明了我需要做什么：

如果紫色、绿色和蓝色框代表 div 元素，而红点是触摸位置，我需要一个返回“div3, div2, div1”的函数。

【问题讨论】：

我有一个plugin，不久前我做了一个与光标类似的操作。我很确定可以将相同的原理应用于触摸变量，但是，在工作中，我什至不能使用我的小提琴，更不用说看到我的旧代码了，我会尽量记住这个问题我今天回家和你确认。现在，我已经包含了一个指向我的插件的链接，也许你可以在那个“盒子”中找到你需要的东西。祝你好运！
它有一个函数可以返回光标下的所有元素，虽然我已经有一段时间没有使用它了，所以我不能确切地告诉你哪个是我的头顶（@ 987654323@)
您不必担心暂时隐藏元素，因为浏览器在函数结束之前不会重绘。

标签： javascript jquery click touch event-propagation

【解决方案1】：

这段代码没有闪烁：

$("body").click(function(e){
    var x = e.pageX, y = e.pageY;
    var res = [];

    var ele = document.elementFromPoint(x,y);
    while(ele && ele.tagName != "BODY" && ele.tagName != "HTML"){
        res.push(ele);
        ele.style.display = "none";
        ele = document.elementFromPoint(x,y);
    }

    for(var i = 0; i < res.length; i++){
        res[i].style.display = "";
    }
    console.log(res);
});

【讨论】：

我不知道浏览器不会重绘..感谢您的帮助:)
此方法不适用于尚未具有 display=block 的元素。这会破坏布局。
是的，但如果我有其他显示类型，我可以相应地重置样式。幸运的是，我需要这个用于使用块的元素。
这也应该使用.style.visibility = "hidden"/"visible"
哈哈，这就是您之前在聊天中的意思，即能够深入挖掘并获得其他人。谢谢你帮了大忙。

【解决方案2】：

怎么办：

 $(document).click(function(e) { 
    var pageX = e.pageX;
    var pageY = e.pageY;
    $('*').each(function(index) {
        var offset = $(this).offset();
        var left = offset.left;
        var right = offset.right;
        var width = $(this).width();
        var height = $(this).height();
        if(pageX > left && pageX < left + width) {
             if(pageY > top && pageY < top + height) {
                  //Handle the div
             }
        }
    });
});

【讨论】：