inert

inert 全局属性 是一个布尔属性,表示浏览器将忽略该元素。使用 inert 属性,所有无法逃避惰性的元素的平面树后代(例如模态 <dialog>)都将被忽略。inert 属性还使浏览器忽略用户发送的输入事件,包括与焦点相关的事件和来自辅助技术的事件。

¥The inert global attribute is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal <dialog>s) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.

具体来说,inert 执行以下操作:

¥Specifically, inert does the following:

  • 防止用户单击元素时触发 click 事件。
  • 通过防止元素获得焦点来防止引发 focus 事件。
  • 通过将元素及其内容从辅助功能树中排除来隐藏辅助技术。
html
<div inert>
  <!-- content -->
</div>

inert 属性可以添加到不应交互的内容部分。当某个元素处于惰性状态时,它以及该元素的所有后代(包括通常的交互式元素,例如链接、按钮和表单控件)都将被禁用,因为它们无法接收焦点或被单击。

¥The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.

inert 属性也可以添加到应在屏幕外或隐藏的元素中。惰性元素及其后代将从 Tab 键顺序和可访问性树中删除。

¥The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.

注意:虽然 inert 是一个全局属性,可以应用于任何元素,但它通常用于内容部分。要制作单独的控件 "inert",请考虑使用 disabled 属性以及 CSS :disabled 样式。

¥Note: While inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the disabled attribute, along with CSS :disabled styles, instead.

无障碍问题

¥Accessibility concerns

应用 inert 属性时,请仔细考虑可访问性。默认情况下,没有直观的方法来判断元素或其子树是否是惰性的。作为 Web 开发者,你有责任清楚地指出活跃的内容部分和惰性的内容部分。

¥Use careful consideration for accessibility when applying the inert attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.

在提供有关内容惰性的视觉和非视觉提示的同时,还要记住视觉视口可能仅包含内容部分。用户可能会放大到一小部分内容,或者用户可能根本无法查看内容。惰性部分不明显惰性可能会导致挫败感和糟糕的用户体验。

¥While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.

规范

Specification
HTML Standard
# the-inert-attribute

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看