如何根据鼠标的位置获取鼠标下的dom元素

document.elementFromPoint(x,y) 的用途是获取x,y坐标的下的dom元素。

这个api在做拖动场景的时候非常好用，比如要将一个元素拖动到其它位置里面，常规的做法是，循环去比对要放入的元素，判断鼠标的坐标和元素的位置关系。

$("[data-taskbox].dropping").removeClass("dropping");

var compares = $(`[data-taskbox]`);

for (let i = 0, j = compares.length; i < j; i++) {
    const el = compares[i];
    var elRect = el.getBoundingClientRect();

    if (
        cx > elRect.x &&
        cx < elRect.x + elRect.width &&
        cy > elRect.y &&
        cy < elRect.y + elRect.height
    ) {
        $(el).addClass("dropping");
        return;
    }
}

那么有了上述api，就不需要去循环了，直接获取当前鼠标所在的元素即可。不仅代码更简洁，性能也大大提升。

$("[data-taskbox].dropping").removeClass("dropping");
const el = document.elementFromPoint(e.pageX, e.pageY);
if (el) {
    const box = $(el).closest("[data-taskbox]");
    if (box?.length) {
        box.addClass("dropping");
    }
}

另外这个api的兼容性也非常好。