调用焦点时按钮和跨度有什么区别？

Question

HTML代码片段:

<div contenteditable='true' id="txt">123<b>456</b>789</div> 
<button onclick="get()">Click Me</button> 
<span onclick="get()">Click Me</span> 
<script>   
  function get(){
      document.getElementById('txt').focus()
  }
</script>

• 单击名为的节点txt,先设置光标7,然后单击"按钮".
  观察div的光标位置.

• 单击名为的节点txt,先设置光标7,然后单击Span.
  观察div的光标位置

比较div的光标位置,
您会发现Buttonclick事件不会改变div的原始光标位置.
但Span点击事件确实如此.

这真的很奇怪,所以这里发生了什么？
(我的测试基于WebKit浏览器.)

Answer 1

Firefox 中的行为是相同的。

我将出去推测单击跨度将导致光标移动到您在跨度中单击的位置，这意味着它在 div 内的位置现在丢失了。将焦点移回 div 会将其放置在默认位置（开头）。单击按钮不会导致光标移动，因为按钮无法容纳光标；所以你的光标一直停留在div中的位置。

光标是html文档中的光标，也可以用来选择文本等；或在 Firefox 中显示（如果您打开插入符号浏览）。现在，如果您使用控件（文本框或文本区域）而不是带有 的 div contenteditable=true，则行为将如您所料（单击跨度或按钮没有区别），因为控件管理自己的光标（为了测试这一点，只需将 div 替换为textarea)。