为什么 JQuery UI 滑块中的句柄是 <a> 标签？答案

【问题标题】：Why the handle in JQuery UI slider is <a> tag?为什么 JQuery UI 滑块中的句柄是 <a> 标签？
【发布时间】：2012-04-18 03:22:15
【问题描述】：

我正在阅读滑块官方演示页面中的代码：http://jqueryui.com/demos/slider/，我想知道为什么<a> 标签用于句柄？为什么不是<div>？

<div class="demo">

<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a class="ui-slider-handle ui-state-default ui-corner-all ui-state-hover" href="#" style="left: 19%; ">
    </a>
</div>

</div>

【问题讨论】：

在 chrome 检查器中将其更改为 div 会杀死它，可能是因为它删除了事件处理程序。
我不知道为什么<a>。但是<div>是块元素，不适合这里。
我也是这么想的，但是因为position:absolute它有display:block

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

我也有同样的疑惑……所以我在这里……有一个理论！

手柄需要能够获得焦点
（当他们这样做时，您可以使用箭头、Home 键和 End 键来操作手柄）

不确定 span 或 div 是否可以拥有焦点（在所有浏览器中..）？

也许可以使用<button> 代替？（有人，请尝试）
- 那会更有意义。并且不要弄乱状态行:(
（如果周围的表单没有正确的提交按钮，我们会不会遇到麻烦？）

【讨论】：

【解决方案2】：

我认为他们使用了锚点，因为在 HTML 中，链接将 HTML 与其他标记语言区分开来，因为它们提供了交互。取自 w3c

HTML 为富文本提供了许多传统的发布习惯和结构化文档，但它与大多数其他标记的区别是什么语言是其超文本和交互式文档的功能。本节介绍链接（或超链接，或 Web 链接）、基本的超文本结构。链接是来自一个 Web 的连接资源给另一个。虽然是一个简单的概念，但链接一直是一个推动 Web 成功的主要力量。

句柄也是你点击的东西，所以也许他们认为使用<a>而不是<span>在语义上更有意义。

为了清楚起见，我的想法是他们可以在技术上使用任何东西，但他们出于语义原因选择锚点

【讨论】：

仍然没有意义。 <a> 用于链接，A link is a connection from one Web resource to another, 句柄无处连接。我认为首选的非语义交互元素是<button>，但人们长期以来一直在使用<a href="#">，因为它更容易定制——但<button>只是as customizable。