单击图像时，哪个是用于调用操作的_proper_ html元素？

Question

我有一个send应用程序(和其他许多应用程序一样)，您可以单击图像来做一些事情，例如，标记条目、发送邮件、标记某些内容.

简而言之，点击图像应该是调用一个动作(通过javascript，但这不是重点)。

我在想，做这件事的“正确”方法是什么？

• <a>-tag？嗯..。实际上它不是link...
• <button>？因为显然按钮是调用action...
• <div>？

的语义元素。

有什么暗示吗？

Answer 1

简短回答

使用<img> --而不是按钮、锚或输入--因为其他元素表明元素是交互式的，即使没有JavaScript。

长答案

点击图像应该调用一个动作(通过javascript，但这不是重点)。

我不同意；这就是重点:)

因为点击激活了JS的功能，所以您的图像应该只在JS环境中可用。

因此，正确的方法是将其插入到JavaScript中；虽然HTML在语义上应该是正确的，但是DOM结构实际上并不需要语义正确，所以您使用的元素变得无关紧要了。

走错路

<div>
    Click on the image to do something: <a href="javascript:wtv()" style="background-image:url(...)">&nbsp;</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事件处理程序时，仍然会遇到同样的问题：

/* external .js file */
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(...)">&nbsp;</a>
</div>

同样，对于那些没有JavaScript的用户，您仍然可以使用(无功能的)超链接。

相反，

相反，使用DOM脚本插入整个该死的东西！我将在<img>事件中使用onclick事件：

/* external .js file */
window.onload = function() {
    var img = document.createElement("img");
    img.src = "...";
    img.onclick = wtv;
    img.style.cursor = "pointer"; // so the mouse turns into a finger,
                                  // like on a hyperlink
                                  // Note: instead assign a class attribute and put this in an external CSS file...
    document.getElementById("myButtonParent").appendChild(img);
}

Answer 2

不要完全理解你想要达到的目标。但是你试过图像输入了吗？

<input type="image" src="image source">

它将执行类似于表单提交的操作。