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

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>

• Click the node named txt, set the cursor before 7,and then click Button.
  Watch the div's cursor position.

• Click the node named txt, set the cursor before 7,and then click Span.
  Watch the div's cursor position

比较div的光标位置，
你会发现 Button 点击事件并没有改变 div 的原始光标位置。
但是 Span 单击事件会。

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

Answer 1

Firefox 中的行为相同。

我会冒险推测单击 span 会导致光标移动到您在 span 中单击的位置，这意味着它在 div 中的位置现在丢失了。将焦点移回 div 会将其放置在默认位置(开头)。单击按钮不会导致光标移动，因为按钮不能容纳光标；所以你的光标一直停留在div中的位置。

光标是html文档中的一个，也用于选择文本，例如；如果您打开插入符号浏览，则在 Firefox 中显示。现在，如果您使用控件(文本框或文本区域)而不是带有 contenteditable=true 的 div，行为将如您所料(单击 span 或按钮之间没有区别)，因为控件管理它自己的游标(要对此进行测试，只需将 div 替换为 textarea)。