js取消焦点事件

参考：

js取消焦点事件

在前端开发中，取消焦点可以通过多种方法实现，以下是一些常用的方法：

1. ‌使用blur()方法‌：通过调用元素的blur()方法来取消焦点。例如，通过element.blur()来取消元素的焦点事件。这种方法适用于直接对特定元素取消焦点。

2. ‌使用document.activeElement属性‌：可以使用document.activeElement属性来获取当前拥有焦点的元素，然后将其设置为null来取消焦点事件。例如，通过document.activeElement.blur()来取消当前拥有焦点的元素的焦点事件。这种方法适用于需要找到并取消当前有焦点的元素的情况。

3. ‌使用DOM事件的preventDefault()方法‌：可以在焦点事件的处理函数中调用event.preventDefault()方法来取消焦点事件的默认行为。这种方法适用于在特定条件下阻止焦点的默认行为。

4. ‌使用CSS的outline属性‌：通过将元素的outline属性设置为none来取消元素的焦点事件。例如，通过element.style.outline = 'none'来取消元素的焦点事件。这种方法适用于通过视觉效果来隐藏焦点的外观。

5. ‌使用JavaScript选择所有可聚焦的元素并移除焦点‌：通过选择所有可聚焦的元素并调用它们的blur()方法来移除所有焦点的示例代码如下：

const removeAllFocus = () => {const focusableElements = ['[contenteditable]','a[href]','area[href]','button:not([disabled])','input:not([disabled]):not([type="hidden"]):not(.no-focus)','select:not([disabled])','textarea:not([disabled])','[tabindex]:not([tabindex="-1"]):not([disabled])','[contenteditable]'].join(',');const allFocusableElements = document.querySelectorAll(focusableElements);allFocusableElements.forEach(element => {element.blur();});
};

这种方法适用于需要移除页面上所有焦点的场景。