Javascript 使用鼠标调整Div大小扩展过快

为了好玩，我正在创建一个小部件，可以切换到使用垂直输入（例如日语）。垂直部分使用的div是

contenteditable

。目前，您可以看到textarea和div，并可以看到它们的内容同步变化。该复选框尚未执行任何操作

我的问题是，

svg

即用于拖动和调整大小的“句柄”位于可编辑的div中，如果用户从div中剪切或粘贴到div中，这将变得一团糟。因此，这是我正在解决的真正问题，如果有更好的修复方法，请告诉我。为了解决这个问题，我将可编辑div放在另一个具有svg的div中，以便内部可编辑div不会影响它

执行此操作后，调整大小功能无法正常工作。单击控制柄后，div向下调整得非常快（它的高度正在增长）

以下是我试图“工作”的内容：

这是一个在我稍微改变布局后，大小被破坏的地方：

---

我只使用纯JavaScript。

问题在于

offsetLeft

和

offsetTop

与元素的父元素相关。您将该相对值与鼠标事件的

clientX/Y

值一起使用，从而产生了不希望的结果

利用

getBoundingClientRect

在

mousemove

处理程序中获得正确的坐标

var bounds = verticalTextarea.getBoundingClientRect();

verticalTextarea.style.width = (evt.clientX - bounds.left) + "px";
verticalTextarea.style.height = (evt.clientY - bounds.top) + "px";

请注意：

getBoundingClientRect

是一个昂贵的计算，可能会对性能产生负面影响

更新：添加了分叉JSFIDLE

---

谢谢！它以前一定一直在工作，因为父级是最外层的div。该复选框是什么？？更正它不起任何作用吗？@mathheadinclouds这是一个单独的文本区域，您可以在其中通过复选框切换垂直/水平。出于调试目的，我将两者都显示出来。最后，我放弃了我的自定义textarea，因为我发现了一个控制文本方向的CSS属性。