简短回答
使用 <img>
标签来展示图片,不要使用按钮、锚点或输入框等元素,因为它们会让用户认为该元素是可交互的,即使没有 JavaScript 的情况下也是如此。
详细解答
点击图片应该调用一个动作(通过 JavaScript 实现,但这不是重点)。
我不同意,这才是重点 :)
因为点击操作只能在启用了 JavaScript 的环境下才能生效,所以你的图片应该只在 JS 环境下可用。
因此,正确的方法是使用 JavaScript 插入图片;虽然 HTML 文档应该具有语义正确性,但 DOM 结构并不一定需要具备语义正确性,因此使用哪个元素已经变得不那么重要了。
错误的方式
<div>
Click on the image to do something: <a href="javascript:wtv()" style="background-image:url(...)"> </a>
</div>
<div>
Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>
这些都是错误的,因为没有JavaScript的用户会看到这些项目,无法使用它们。
其中,我认为
<img>
是较小的问题,因为它不暗示交互元素。最大的问题是将
<a>
作为锚点使用,应该将其作为超链接指向另一个文档,并且永远不要使用
javascript:
协议。
即使在外部添加JavaScript事件处理程序时,您仍将面临同样的问题:
document.getElementById("myButton").onclick = wtv;
<!-- HTML document -->
<div id="myButtonParent">
Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)"> </a>
</div>
再次提醒,您仍然可以向那些没有JavaScript的用户提供(无效)超链接。
相反地
相反地,使用DOM脚本插入整个内容!我将使用带有onclick
事件的<img>
:
window.onload = function() {
var img = document.createElement("img");
img.src = "...";
img.onclick = wtv;
img.style.cursor = "pointer";
document.getElementById("myButtonParent").appendChild(img);
}
<button>
,但这取决于你。 我自认为是一个纯粹主义者,但我还没有思考过这个问题 :) - MvanGeest<img>
(并通过DOM脚本添加JavaScript操作,因为我们希望对非JavaScript用户友好)。(2) 由于我的应用程序是内部使用的,所以我会调皮地选择<img>
,并直接附加JavaScript...感谢大家快速而好的回答!非常有帮助 :-) - thomastiger