javascript - 按类在给定位置查找 DOM 中的元素

Question

我正在尝试实现拖放功能，在拖动时，我需要找到相对于具有特定类的 div 的位置。问题是这个 div 与我拖动的元素重叠。为了解决这个问题，我有一个循环，我只需将每个元素的显示样式设置为无，然后再次使用 elementFromPoint。所以像这样:

e = document.elementFromPoint(x, y);
while(!e.hasClass("abc")) {
    e.style.display = "none";
    e = document.elementFromPoint(x, y);
}
return e;

我面临的问题是，我相信当我将 dom 元素的显示样式设置为无时，窗口会向上移动。我想避免这种情况。还有其他方法吗？

我正在尝试使用 vanilla javascript 编写解决方案。

谢谢。

Answer 1

这gist oslego 展示了一个解决方案。

//
// returns a list of all elements under the cursor
//
function elementsFromPoint(x,y) {
    var elements = [], previousPointerEvents = [], current, i, d;

        // get all elements via elementFromPoint, and remove them from hit-testing in order
    while ((current = document.elementFromPoint(x,y)) && elements.indexOf(current)===-1 && current != null) {

            // push the element and its current style
        elements.push(current);
        previousPointerEvents.push({
                value: current.style.getPropertyValue('pointer-events'),
                priority: current.style.getPropertyPriority('pointer-events')
            });

            // add "pointer-events: none", to get to the underlying element
        current.style.setProperty('pointer-events', 'none', 'important'); 
    }

        // restore the previous pointer-events values
    for(i = previousPointerEvents.length; d=previousPointerEvents[--i]; ) {
        elements[i].style.setProperty('pointer-events', d.value?d.value:'', d.priority); 
    }

        // return our results
    return elements;
}

您可以修改该函数以完全按照您的要求执行操作，或者在返回的数组中搜索符合您条件的元素。