當我們在網頁中使用JavaScript開發交互性功能時，判斷焦點是一個經常會用到的技巧。在很多情況下，我們需要知道用戶正在與哪個HTML元素進行交互，以便在此基礎上進行后續處理。

判斷焦點的方法有很多種，比較常見的有以下幾種：

//獲取當前焦點元素
document.activeElement 
//判斷某個元素是否獲得焦點
element === document.activeElement 
//判斷某個元素是否是當前焦點元素的子元素
element.contains(document.activeElement)
//判斷某個元素是否被點擊過，即是否具有焦點狀態
element.matches(':focus')
//判斷某個元素是否處于焦點元素之后（tab鍵切換焦點）
element.compareDocumentPosition(document.activeElement) === 2

舉個例子，假設我們有一個表單，包含多個輸入框和多個按鈕，每次用戶輸入完成后，我們需要將光標自動定位到下一個輸入框中。

const inputs = document.querySelectorAll('input')
inputs.forEach((input, index) =>{
input.addEventListener('keyup', e =>{
if (e.keyCode === 13) {
const nextInput = inputs[index + 1]
if (nextInput) {
nextInput.focus()
}
}
})
})

上述代碼中，我們使用了focus()方法將焦點自動轉移到下一個輸入框中。

除此之外，還有很多場景需要判斷焦點。比如，在一個列表中，當用戶點擊其中一個元素后，我們需要隱藏該元素并顯示一個編輯表單，此時需要判斷點擊事件發生的元素是否與之前的焦點元素相同。

const list = document.querySelector('.list')
list.addEventListener('click', e =>{
const clickedItem = e.target
const isFocused = clickedItem === document.activeElement
if (!isFocused) {
clickedItem.style.display = 'none'
const editForm = document.querySelector('.edit-form')
editForm.style.display = 'block'
}
})

上述代碼中，我們使用了事件對象中的target屬性來獲取點擊的元素，在判斷時使用了之前提到的element === document.activeElement方法。

總之，判斷焦點是JavaScript中一個非常重要的技巧，可以幫助我們解決很多交互問題。掌握以上幾種判斷焦點的方法，可以提高我們的開發效率和工作質量。