javascript - 如何检测 `focusin` 支持？

Question

感谢Perfection kills ，我们可以使用以下 JavaScript 来检测事件支持:

function hasEvent(ev) {
    var elem = document.createElement('a'),
        type = 'on' + ev,
        supported = elem[type] !== undefined;
    if (!supported) {
        elem.setAttribute(type, 'return;');
        supported = typeof elem[type] === 'function';
    }
    elem = null;
    return supported;
}

这只在我需要它的时候起作用:检测 mouseenter 支持； hasEvent('mouseenter') 将在 Chrome、Firefox 等中返回 false，这是应该的。

但现在我正在尝试“修复”不支持 focusin 和 focusout 事件的浏览器。 According to PPK ，基本上就是 Firefox。不幸的是，Chrome 和 Safari 被列为具有“不完整”支持，原因如下:

Safari and Chrome fire these events only with addEventListener; not with traditional registration.

一般来说，这很好；无论如何，我只会使用 addEventListener。然而，它确实意味着通过 elem.onfocusin !== undefined 检测支持将不起作用。我测试了一下，确实如此:

<p>Do I support <a href="#">focusin</a>?</p>

<script>
var elem = document.getElementsByTagName('p')[0];

// hasEvent method defined here
function listener() {
    var response = hasEvent('focusin') ? 'Yes!' : 'No...';
    alert(response);
}

elem.addEventListener('focusin', listener, false);
</script>

上述警告 No... 在 Chrome 中!有什么方法可以在不使用浏览器嗅探的情况下检测浏览器是否支持 focusin？

Answer 1

focusin 和 focusout 应该在目标元素获得焦点之前触发，事件顺序似乎也有问题

http://www.w3.org/TR/DOM-Level-3-Events/#events-focusevent-event-order

目前，只有 IE 符合规范:

Chrome/Safari:
focus
focusin
DOMFocusIn
blur
focusout
DOMFocusOut
focus
focusin
DOMFocusIn

Opera 12:
focus
DOMFocusIn
focusin
blur
DOMFocusOut
focusout
focus
DOMFocusIn
focusin

IE 8:
focusin
focus
focusout
focusin
blur
focus

Firefox 14:
focus
blur
focus