JavaScript - 忽略鼠标是否位于文本区域的 "resize handle"上

Question

我有一个简单的可拖动文本区域元素的以下代码:

HTML:

<textarea type="text" onmousedown="mouseDown(this)"></textarea>

JavaScript:

const mouseDown = element => {

    document.onmousemove = e => {
        element.style.left = `${e.pageX}px`;
        element.style.top = `${e.pageY}px`;
    }
}

document.onmouseup = () => document.onmousemove = null;

除了一个问题之外，这非常有效。由于它是一个 textarea，尝试调整该元素的大小会使其变为 0px x 0px 并被拖动。如果鼠标位于调整大小 handle 上，我的 onmousemove 函数如何返回？

Answer 1

计算元素调整大小 handle 所在位置的大小和部分。您可以使用 element.getBoundingClientRect() 使用元素偏移高度、宽度和页面位置来获取该区域的相对位置。

一旦找到这些边界，它就会变成我的指针是否在我定义为不可拖动的框内？