dhtml - 是否有任何理由使用javascript 操作？

Question

无论我在哪里触发 Javascript 动作，我总是盲目地将<a href="#">, 和onclick监听器放在锚点上：

<ul>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<script>
    $('li a').click(function(e) {
        e.preventDefault();

        // ...
    });
</script>

然而，我现在意识到我只是机械地做，而且这更干净、更简单：

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>

<script>
    $('li').click(function(e) {
        // ...
    });
</script>

第二种方法是否有任何缺点，或者当 javascript 操作未绑定到 URL时，它绝对是要走的路吗？

注意：我读过这个类似的问题，但发帖人询问删除href属性，仍然保留<a>.

Answer 1

我认为使用锚标签的一个可能原因是它更容易被不能使用鼠标的用户访问（由于残疾或由于他们的硬件配置）。当用户使用键盘浏览网页时，浏览器倾向于从一个锚点跳转到下一个锚点，并且即使您将 JS 事件处理程序附加到它也可能不会停止在 li 标签上。

Answer 2

我相信如果没有，href您将失去一些超链接通常会给您的样式。

Answer 3

取决于上下文 - 这是一个重要的短语 -

根据上下文，使用该a元素的某些东西具有优势，因为它的样式类似于链接。当用户鼠标悬停时，它会自动更改光标。此外，再次，根据上下文，href可以指向一些有用的东西——非 JS 启用访问者（如谷歌）的后备。

如果不采取任何措施使您li看起来可点击，它可能会被忽略。

Answer 4

第二种方法的一个主要缺点是，在浏览器中禁用 JavaScript 的用户将无法访问您的网站。当然，如果这些用户无论如何都无法访问您的网站，那么这不是一个有效的考虑因素。

除此之外，还有一些 CSS 工作涉及使li元素看起来像一个真实的链接，例如你必须使用cursor: pointer，这已经是真实链接的默认设置。

在更抽象的层面上，以语义正确标记的名义，使用专门为它们设计的 HTML 元素生成链接（或类似链接的页面元素）更为明智，除非您有充分的理由避免这种情况。

毕竟，严格来说，项目符号列表和基于选项卡的导航在语义上并不是一回事。