Javascript Contenteditable div-按钮单击事件与其他元素单击事件有何不同？

我试图通过单击其他元素，在内容可编辑div中的当前光标位置插入文本。如果我单击按钮，但不使用任何其他元素，这将非常有效。我的意思是，对于按钮，它是在光标位置插入的，但是对于任何其他元素的单击，它总是添加div的起始位置。下面是一个示例，其中包括按钮单击和DIV单击（它不适用于任何其他标记）。这两次点击之间有什么区别吗？如何使DIV完全像按钮单击一样单击。请注意，我没有使用JQUERY（但如果VUEJS有任何解决方案，我很好）。多谢各位

这里是jsfiddle链接

函数insertTextAtCursor（文本）{
document.getElementById（'pre'）.focus（）；
变量sel、范围、html；
sel=window.getSelection（）；
范围=选择范围（0）；
range.deleteContents（）；
var textNode=document.createTextNode（文本）；
range.insertNode（textNode）；
range.setStartAfter（textNode）；
选择removeAllRanges（）；
选择添加范围（范围）；
}

正文{
背景色：#CCC；
}
div{
边框：1px#000实心；
背景色：#FFF；
宽度：900px；
左边距：自动；
右边距：自动；
文本对齐：居中；
边缘顶部：20px；
边缘底部：20px；
垂直对齐：居中；
填充：30px；
}

编辑
在这里更新文本。这是contenteditable div
（此按钮在光标当前位置插入文本）
单击此处插入上述contenteditable div（不会在当前位置插入，但始终在位置1）

与许多其他元素不同，按钮不会在单击时获得焦点。由于您依赖于函数中的焦点，在成功的

单击
事件（包括弹出DOM树的
mouseup
+
mousedown
）后，您的焦点将首先设置在div上。您可以通过监听mousedown事件并调用
event.preventDefault（）
来避免这种情况，也可以在触发
单击之前简单地触发函数，即
onmousedown

这是一个很好的解释


var prevented=document.getElementById（“prevented”）；
addEventListener（'mousedown'，event=>event.preventDefault（））；
函数insertTextAtCursor（文本）{
document.getElementById（'pre'）.focus（）；
变量sel、范围、html；
sel=window.getSelection（）；
范围=选择范围（0）；
range.deleteContents（）；
var textNode=document.createTextNode（文本）；
range.insertNode（textNode）；
range.setStartAfter（textNode）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
正文{
背景色：#CCC；
}
div{
边框：1px#000实心；
背景色：#FFF；
宽度：500px；
左边距：自动；
右边距：自动；
文本对齐：居中；
边缘顶部：20px；
边缘底部：20px；
垂直对齐：居中；
填充：30px；
}

编辑
在这里更新文本。这是contenteditable div
（此按钮在光标当前位置插入文本）
单击此处插入上述contenteditable div（不会在当前位置插入，但始终在位置1）
但这并不能解决问题，它只是在失去焦点之前设置了一次。我只是给出了问题根源的基本想法。我已经用一个基本的事件侦听器更新了我的答案。谢谢你的答案和解决方案。这真的很有帮助。我必须检查是否可以为表情符号mart vue实现此功能。再次感谢