调用焦点时，按钮和跨度之间的区别是什么

What is the difference between button and span when invoke focus?

本文关键字：之间 区别 是什么 焦点 按钮 调用      更新时间：2023-09-26

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之前，然后单击"跨度"
    观察div的光标位置

比较div的光标位置，
您会发现Button单击事件不会更改div的原始光标位置
但Span点击事件确实如此。

这真的很奇怪，那么这里发生了什么
（我的测试基于WebKit浏览器。）

在Firefox中的行为是相同的。

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

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

关于您正在做的事情的可访问性，有一点需要注意，标签不像按钮那样被视为"可点击"资产。因此，当涉及到仅通过键盘访问您正在创建的控件时，对于那些不使用鼠标浏览页面内容并依赖键盘的人来说，标签不一定通用。

相关文章：