SVGElement: focus() 方法

Baseline 已廣泛支援

此功能已成熟,可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

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

瀏覽器相容性

另見