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操作没有绑定到网址时，它是肯定的方式吗？

注意：我已阅读此similar question，但海报询问是否要删除href属性，仍保留<a>。

Answer 1

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

Answer 2

我相信没有href你会失去一些超链接通常会给你的样式。

Answer 3

取决于具体情况 - 这是一句大话 -

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

如果不执行某些内容以使li看起来可点击，则可能会被忽略。

Answer 4

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

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

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

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

有没有理由使用<a href="#"> for javascript actions?</a>

4 个答案: