Question

Firefox支持relatedTarget / focus的{{1}}，但不 blur / focusin事件。

IE仅支持focusout / focusin，但不 focusout / focus事件。

Chrome支持两者。

有没有办法在浏览器中使用blur？

以下是relatedTarget示例（在Chrome和FF中工作但不在IE中）： https://jsfiddle.net/rnyqy78m/

这里有blur示例（在Chrome和IE中工作，但不是FF）： https://jsfiddle.net/rnyqy78m/1/

修改

我最终使用浏览器检测。所以我用

focusin

然后var eventType; if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { eventType = 'blur'; } else { eventType = 'focusout'; }。

Answer 1

（发布作为答案，以便我可以使用代码示例。虽然这更适合作为评论。）

在这个问题上有很多重复的问题，只有100％的时间没有答案。然后，一旦你进入大型/复杂的应用程序，这个问题通常不会出现。如果我需要用户操作的订单，我只需将其保存为变量。

所以我的代码只会颠倒逻辑并使用“焦点”＃39;如果你需要它来为第一个焦点工作，而不是模糊。如果用户没有点击另一个输入事件也需要发生模糊事件，我还会将焦点事件处理程序绑定到页面上的任何点击事件。这种策略是交叉浏览器，它不是很漂亮和/或效率很高。

这并不完美，因为它会在第一次点击后触发两个事件，但这很容易解决。但是随着代码的调整，应该可以找到模仿所需行为的事件组合。（所以我需要更多关于控制台元素何时应该写入id的详细信息，或者不需要编写完整的实现。）

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <input id="one" value="focus me first">
    <input id="two" value="focus me next">
    <input id="console">
    <script>
    var currentElement,
        inputOne = document.getElementById('one'),
        inputTwo = document.getElementById('two'),
        inputConsole = document.getElementById('console'),
        focusHandler = function( event ) {
            if (currentElement) inputConsole.value += currentElement.id;
            currentElement = event.target;
        };
    inputOne.addEventListener('focus', focusHandler);
    inputTwo.addEventListener('focus', focusHandler);
    // optional handler for 'focus non-input elements', aka blur the prev clicked element.
    document.addEventListener('click', focusHandler);
    </script>
</body>
</html>

如何跨浏览器使用relatedTarget？

1 个答案: