为了好玩，我正在创建一个可以切换为使用垂直打字(例如日语)的小部件。垂直部分由 contenteditable 的 div 完成。此刻，您可以同时看到 textarea 和 div，并看到它们的内容同步变化。该复选框尚未执行任何操作。
我的问题是，作为拖动和调整大小的“句柄”的 svg 位于可编辑的 div 中，如果用户从 div 中剪切或粘贴到 div 中，这会变得一团糟。这就是我要解决的真正问题，如果有更好的解决方法，请告诉我。为了解决这个问题，我将可编辑的 div 放在另一个具有 svg 的 div 中，以便内部可编辑的 div 不会影响它。
执行此操作后，调整大小功能无法正常工作。单击 handle 后，div 会非常快速地向下调整大小(它的高度在增长)。
这是我试图做的“工作”:https://jsfiddle.net/m4Ljuzyn/167/
这是在我稍微更改布局后调整大小被破坏的那个:https://jsfiddle.net/m4Ljuzyn/190/
我只使用纯 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 是一项昂贵的计算，可能会对性能产生负面影响。
更新:添加了 Forked JSFiddle https://jsfiddle.net/csoh7xzv/
关于javascript - 用鼠标调整大小的 Div 扩展太快，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49415923/