Javascript 菜单（非导航）的正确标记

我有一个作为菜单的元素列表（不是站点的导航，我已经排除了使用菜单标签，因为它的支持有限）：

....

当你点击每一个按钮时，javascript会做一些事情

如果每个li都包含一个按钮标记，那么最好的标记是什么：

<li><button><img src="open-file.png"></button></li>

或者每个li都应该是一个锚：

<li><a href="#"><img src="open-file.png"></a></li>

还是别的什么

这里什么是语义正确的？

通常的规则适用

从有效的东西开始。使用JS逐步增强它。

---

你能退回到链接吗？i、 e.如果JS失败，遵循链接是否是明智的退路？如果是，请使用链接

---

（

前端开发世界（IMO）的普遍共识是在元素中添加类似类的内容，然后应用侦听器

有一个备份链接，在不使用JavaScript的情况下运行您的操作（如果您愿意，将
#null
放在href中只会使其不起任何作用），然后将
event.preventDefault（）；
添加到事件中，以防止它们执行导航到其他页面的默认操作，从而使您的JavaScript可以运行

HTML示例：

<ul>
    <li><a href="?action=open" class="open"><img src="open-file.png" alt="Open File" /></a></li>
    <li><a href="?action=close" class="delete"><img src="delete-file.png" alt="Delete File" /></a></li>
</ul>

原始JavaScript示例：

document.getElementsByClassName('open')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
document.getElementsByClassName('delete')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

首先，由于我是StackOverflow新手，我不确定这是否是正确的方法

Quenton的回答是很好的。你应该考虑这些控制会做什么，并使用适当的链接来支持非JS的支持。有足够多的人觉得JS关闭以保证它更舒服。

对于处理JavaScript，如上所述，类是一种很好的方法。要扩展它，每个元素也可以有几个类。例如：

<li class="MenuItem"><a herf="/path/to/action" class="MenuAction MenuAction_Open">(text or image here)</a></li>

这取决于语义。您提到单击其中一个菜单项会触发一些JavaScript，因此我想更具语义的方法是使用按钮而不是锚定标记。原因如下：


锚定标记用于将用户导航到资源或文档
按钮用于其他操作，例如以某种方式更改当前页面的状态（提交或重置表单等）

请参阅David Walsh的文章。
不要这样做。默认情况下，列表项不是交互式元素。您只是使在没有定点设备（例如鼠标）的情况下无法激活控件。许多人确实需要通过页签来访问控件。@Quentin根据您的评论进行了更新。谢谢。如果图像在按钮标签中，我可以给按钮标签一个标题atr吗？而不是alt。关于按钮的建议信息不能很好地替代与图像传达相同信息的文本。alt是非常可取的。虽然这是非常好的信息，但问题似乎不是关于JavaScript，而是关于HTML语义。您是否支持IE8和/或以下版本？IE9与我所说的一样低。如果添加适当的CSS使其成为块元素，则可以使用
标记：
菜单{display:block}
此问题的可能重复项确实添加了使用按钮或a的菜单的特定上下文，因此它可能足够清晰，不会重复？我希望落选选民能让我知道我做了什么值得落选。我宁愿学习也不愿保持无知。：）不幸的是，落选的选民没有这么体贴。我只能提出你投反对票的可能原因：（A）你有一个网站链接，但不要在回答中引用文本，因为链接可能会消失。（B） 它有点重复别人已经说过的话。就我个人而言，我认为你的回答不值得投反对票，所以我要否定它。谢谢。我承认，我想发表评论，但作为新手，我只有几个选择。
$('li.open').on('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
$('li.delete').on('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

document.getElementsByClassName('open')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Open clicked');
});
document.getElementsByClassName('delete')[0].addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Delete clicked');
});

<li class="MenuItem"><a herf="/path/to/action" class="MenuAction MenuAction_Open">(text or image here)</a></li>