英文:
Use popover api with `<div role="button">` as invoking element
问题
使用弹出窗口API时，我想要打开一个带有<div role="button">的弹出窗口，但似乎不起作用。以下是尝试此操作的代码片段：
<div role="button" popovertarget="mypopover" style="border: 1px solid black; cursor: pointer;">Broken toggle</div>
<button popovertarget="mypopover">Happy toggle</button>
<div id="mypopover" popover>弹出窗口内容</div>
只有当<button>是调用元素时，它似乎起作用。
是否有人知道调用元素是否可以是除了<button>之外的其他东西？
英文:
When using the popover api I would like to open a popover with <div role="button"> but this doesn't seem to work. Here is a snippet that attempts this.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div role="button" popovertarget="mypopover" style="border: 1px solid black; cursor: pointer;">Broken toggle</div>
<button popovertarget="mypopover">Happy toggle</button>
<div id="mypopover" popover>Popover content</div>
<!-- end snippet -->
It only seems to work if a <button> is the invoking element.
Does someone know if the invoking element can be something else then a <button>?
答案1
得分: 2
在 HTML 中选择使用哪个标签不仅仅是语义的问题。许多元素也具有内置行为，在 JavaScript 中也可以访问该元素。尽管可以通过像 role 这样的属性来部分控制元素的语义，但这并不会改变它们的实际行为。
在 Popover API 的情况下，有一个限制，只有 <button> 和 <input> 元素才能具有 popovertarget 属性。MDN 对 Popover API 的页面有相关文档。
通常情况下，可以编写带有无效标签的 HTML，但浏览器会将其忽略。类似于如果您尝试在 <p> 标签上添加 href 属性，它不会变成链接。
当您使用 role 更改元素的语义而不是直接使用适当的元素时，应该非常谨慎和深思熟虑。在这个例子中，当您使用 <div> 代替应该使用 <button> 时，会丧失一些内置在按钮中的功能，比如能够接收键盘焦点，以及将某些按键视为“点击”事件。对于那些使用键盘而不是鼠标等指针设备的人来说，这些都是非常重要的无障碍功能，例如可能是因为他们是盲人或有运动障碍。
可以通过给元素添加 tabindex="0" 并添加事件侦听器来复制这些功能，但更容易的方法是直接使用 <button>。如果问题只是样式方面的，这在我看来通常是人们避免使用 <button> 元素的情况，实际上应该使用它的情况，最好通过 CSS 解决。
如果您也是这种情况，那么您可能会对了解 unset CSS 属性感兴趣，它现在已经得到了所有现代浏览器的支持，可以使将“干净状态”的样式应用于按钮变得更容易。
英文:
Choosing which tag to use in HTML isn't just a question of semantics. Many elements also have built-in behaviour, which is also exposed on the element in JavaScript. Though it's possible to have some control of the semantics of an element through attributes like role, this doesn't change their actual behaviour.
In the case of the Popover API, there is a limitation that only <button> and <input> elements are able to have a popovertarget attribute. MDN's page on the Popover API documents this.
As usual, it's possible to author HTML with invalid tags, but the browser will just ignore these. Similar to if you try to put an href attribute on a <p> tag, it won't turn into a link.
You should think very carefully and very deliberately when using role to change the semantics of an element instead of just using an appropriate element in the first place. In this example of using a <div> where you should use a <button>, you lose several pieces of functionality that are built into buttons such as being able to receive keyboard focus, and treating certain key presses as "click" events. These are very important accessibility features for people who use a keyboard instead of a pointer device like a mouse, for example because they may be blind or have a motor disability.
It's possible to replicate these through methods such as giving the element tabindex="0" and adding event listeners to handle those keyboard events, but it's much easier to just use a <button>. If the problem is just one of styling, which in my experience is often the case when people avoid using a <button> element for something that really should use one, it's best to resolve that through CSS.
If this is the case for you too, then you may be interested to learn about the unset CSS property, which is supported by all modern browsers now and can make it much easier to apply "clean slate" styling to a button.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论