使用 popover api 和 `<div role="button">` 作为调用元素

Question

使用 popover api 时，我想用

<div role="button">

打开一个 popover，但这似乎不起作用。这是尝试此操作的片段。

<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>

似乎只有当

<button>

是调用元素时才有效。

有人知道调用元素是否可以是其他元素而不是

<button>

？

Answer 1

选择在 HTML 中使用哪个标签不仅仅是一个语义问题。许多元素还具有内置行为，这些行为也在 JavaScript 中的元素上公开。虽然可以通过像

role

这样的属性对元素的语义进行一些控制，但这不会改变它们的实际行为。

对于 Popover API，有一个限制，即只有

<button>

和

<input>

元素才能具有

popovertarget

属性。 MDN 关于 Popover API 的页面 对此进行了记录。

像往常一样，可以使用无效标签编写 HTML，但浏览器只会忽略这些标签。类似于如果您尝试将

href

属性放在

<p>

标签上，它不会变成链接。

在使用

role

更改元素的语义时，您应该非常仔细、非常慎重地思考，而不是首先使用适当的元素。在本应使用

<div>

的地方使用

<button>

的示例中，您会丢失按钮中内置的多项功能，例如能够接收键盘焦点以及将某些按键视为“单击”事件。对于使用键盘而不是鼠标等指针设备的人来说，这些是非常重要的辅助功能，例如因为他们可能是盲人或有运动障碍。

可以通过提供元素

tabindex="0"

并添加事件侦听器来处理这些键盘事件等方法来复制这些内容，但仅使用

<button>

会更容易。如果问题只是样式之一（根据我的经验，当人们避免将

<button>

元素用于真正应该使用的元素时，通常会出现这种情况），那么最好通过 CSS 来解决该问题。

如果您也是这种情况，那么您可能有兴趣了解

unset

CSS 属性，该属性现在 所有现代浏览器都支持，并且可以更轻松地应用“clean slate”样式到一个按钮。

Answer 2

我遇到了类似的问题，我有一个无法更改为按钮的自定义元素。我最终所做的是将按钮放入我的自定义元素中。在您的情况下，您可能只需将按钮放在 div 内即可。这是根据我的建议更新的片段：

<div role="button" popovertarget="mypopover" style="border: 1px solid black; cursor: pointer;">Broken toggle</div>
<button popovertarget="mypopover">Happy toggle</button>

<div><input type="button" popovertarget="mypopover" value="Happy toggle inside a div" style="border: 1px solid black; cursor: pointer;"/></div>



<div id="mypopover" popover>Popover content</div>