哪些 HTML 标签可以与 onClick 一起使用？

Question

哪些 HTML 标签可以包含onclick 事件，哪些不能？如果有些标签我不能包含 onclick 事件，我想知道为什么不包含？

onclick="func()"

有什么你应该遵守的规则吗？

Answer 1

所有 HTML 元素都可以有一个onclick 属性。

请参阅the HTML 5 specification 进行确认。

（当然，有些元素默认不渲染，因此您必须先用 CSS 更改它们的 display 属性，然后才能点击它们以触发事件处理程序）。

Answer 2

'“我有权做任何事，”你说 - 但并非一切都是有益的' - 使徒保罗，哥林多前书 6:12

比较the comments on this post 和生成的MDN web docs 链接，这强烈暗示<div> 和<span> 等元素不应用于点击操作，因为它们“本质上不代表任何东西”和“它只有在没有其他语义元素是合适的时候才应该使用。”

您会看到，虽然几乎可以将onclick 附加到任何东西，但某些元素可以进一步支持被点击（或者更确切地说，阻止点击），而其他元素则不能。

因此，我建议将问题重新表述为“哪些 HTML 标记完全支持 onClick？”或类似的东西。 <input> 将是完全支持的标记的一个很好的例子，因此 <span> 不会。

我也非常想找到一个“一流点击公民”的 HTML 标记列表，这样我就可以更好地选择我的网络元素。

Answer 3

任何元素都可以通过 ID 或类产生 onclick 事件。 使用 jQuery，这很容易：

// Talk to any element with a unique ID of "myElementId".
$('#myElementId').on('click', function(event){
    alert('CLICK');
    // do something else.
    event.preventDefault();
});

// Talk to any element with a class of "myClassElement".
$('.myClassElement').on('click', function(event){
    alert('CLICK');
    // do something else.
    event.preventDefault();
}

// Talk to the <header> element.
$('header').on('click', function(event) {
    alert('CLICK');
    // do something else.
    event.preventDefault(); 
)};