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 元素的類似方法。