Clickable Div - 包装锚链接或使用 JS？答案

【问题标题】：Clickable Div - Wrap anchor link or use JS?Clickable Div - 包装锚链接或使用 JS？
【发布时间】：2014-02-18 11:25:41
【问题描述】：

我有一个相当复杂的动态 Div 类列表，其中包含用于显示商店内容的各种下一个 div - 整个事物需要具有悬停状态并且是可点击的（它目前已应用悬停样式）并且可访问。

我想我可以通过 -

1 - 将包含的 Div 设置为 Anchor 链接并相应地设置样式

2 - 在 div 类中嵌套一个锚标记，并编写一个 JS 函数以在单击包含 div 时触发对锚的单击。

什么是正确的方法？

【问题讨论】：

【解决方案1】：

我肯定会使用包装 <a> 在这种情况下您不必考虑设置 tabIndex=0、role=link 并且您可以跳过添加额外的 JavaScript 以使按钮可点击并绑定输入键也是相同的操作。

或者，如果“链接”没有将用户带到另一个位置，而只是显示模式窗口或其他一些花哨的功能，您应该用 <button> 包裹 <div> 在这种情况下，您也可以跳过绑定空格键动作也一样，因为它是继承的。（但如果你真的做不到，你应该在包装<a> 中添加role=button）

现在您可以专注于造型并记住同时使用:hover 和:focus

【讨论】：

【解决方案2】：

可以通过添加一个“onclick”处理程序来使

可点击。但是，您应该指定一个 ARIA “role” 属性（例如 role="button" 或 role="link"）以及指定 "tabindex" 属性（tabindex="0"）以使元素能够使用键盘上的选项卡按钮时获得焦点。

【讨论】：