SVGElement: focus() 方法
SVGElement.focus() 方法会在指定的 SVG 元素上设置焦点（如果该元素可以获得焦点）。获得焦点的元素将默认接收键盘等事件。
默认情况下，浏览器在聚焦元素后会将其滚动到视图中，并且还可能提供可见的焦点指示（通常是通过在元素周围显示“焦点环”）。提供了参数选项来禁用默认滚动并强制对元素显示可见指示。
语法
js
focus()
focus(options)
参数
options可选-
一个可选对象，用于控制聚焦过程的各个方面。该对象可能包含以下属性
preventScroll可选-
一个布尔值，指示浏览器是否应滚动文档以将新获得的焦点元素带入视口。
preventScroll的值为false（默认值）表示浏览器在聚焦元素后会将其滚动到视口。如果将preventScroll设置为true，则不会发生滚动。
返回值
无（undefined）。
示例
聚焦 SVG 元素
此示例使用一个按钮将焦点设置在 SVG 圆形元素上。
HTML
html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="50" tabindex="0" fill="blue" />
<button id="focusButton">Focus the circle</button>
</svg>
JavaScript
js
document.getElementById("focusButton").addEventListener("click", () => {
const circle = document.getElementById("myCircle");
circle.focus();
});
规范
| 规范 |
|---|
| HTML # dom-focus-dev |
注意
- 如果您从 mousedown 事件处理程序调用
SVGElement.focus()，则必须调用event.preventDefault()以防止焦点离开SVGElement。
浏览器兼容性
加载中…
另见
SVGElement.blur可从元素中移除焦点。HTMLElement.focus是 HTML 元素的类似方法。