获取页面矩形区域内的 DOM 元素答案

【问题标题】：Get DOM elements inside a rectangle area of a page获取页面矩形区域内的 DOM 元素
【发布时间】：2019-07-22 18:59:57
【问题描述】：

给定网页上的两个点和一组 DOM 元素，如何找出位于由这两个点定义的矩形区域内的那些 DOM 元素的子集？

我正在开发一个基于网络的画廊，其中每张照片都包含在li 标记中。当用户用鼠标拖出一个矩形区域时，矩形内的所有li元素都被标记为选中。

首选 jQuery 解决方案，以减少冗长和有效的方式。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试这样的：

// x1, y1 would be mouse coordinates onmousedown
// x2, y2 would be mouse coordinates onmouseup
// all coordinates are considered relative to the document
function rectangleSelect(selector, x1, y1, x2, y2) {
    var elements = [];
    jQuery(selector).each(function() {
        var $this = jQuery(this);
        var offset = $this.offset();
        var x = offset.left;
        var y = offset.top;
        var w = $this.width();
        var h = $this.height();

        if (x >= x1 
            && y >= y1 
            && x + w <= x2 
            && y + h <= y2) {
            // this element fits inside the selection rectangle
            elements.push($this.get(0));
        }
    });
    return elements;
}

// Simple test
// Mark all li elements red if they are children of ul#list
// and if they fall inside the rectangle with coordinates: 
// x1=0, y1=0, x2=200, y2=200
var elements = rectangleSelect("ul#list li", 0, 0, 200, 200);
var itm = elements.length;
while(itm--) {
    elements[itm].style.color = 'red';
    console.log(elements[itm]);
}

对于 vanilla JS 解决方案，请查看此笔：https://codepen.io/ArtBIT/pen/KOdvjM

【讨论】：

感谢 ArtBIT。我只是在谷歌上搜索了一段时间。似乎没有方便的方法来做到这一点，除了循环所有 DOM 元素并对它们进行小学数学之外，没有更好的解决方案。
不用担心@powerboy，是的，这就是我添加selector 支持的原因，以减少您需要处理的元素数量。
您可以使用getBoundingClientRect() 一次调用获得具有top,right,bottom,left,width 和height 的对象。
@ArtBIT：如果我没有选择器传递给上面提到的“rectangleSelect”方法，我如何在给定的矩形坐标内找到元素？不想将顶级文档作为选择器，因为遍历每个元素会对性能造成很大影响。
@PankajKapare 性能正是您需要传入选择器的原因，因为它将遍历仅限于该元素的子元素。在上面的例子中，jQuery 会为你做优化，它会首先获取ul#list 元素的引用，然后选择任何作为其子元素的li 元素，并检查它们是否落在选择矩形内。尝试传递后代选择器，这将有助于 jQuery 限制搜索范围。