如何跨浏览器使用relatedTarget？答案

【问题标题】：How to use relatedTarget across browsers?如何跨浏览器使用relatedTarget？
【发布时间】：2016-12-23 10:11:44
【问题描述】：

Firefox 支持 relatedTarget 用于 focus/blur 但不 focusin/focusout 事件。

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

Chrome 两者都支持。

有没有办法跨浏览器使用relatedTarget？

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

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

编辑

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

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

然后是….addEventListener(eventType, …)。

【问题讨论】：

我尝试了一些手动创建事件的变体，然后检查您是否可以从它们那里获得相关目标，但以我目前的知识，我无法在 IE 和 chrome 中工作。所以要么摆弄从window.navigator检测firefox，尝试像我一直在尝试的那样使事件特征检测工作，或者最坏的情况只是创建一个变量来存储对最后一个聚焦目标的引用。
@Shilly 感谢您的努力。我希望我能想出办法。奇怪的是似乎没有其他人遇到过这个问题。

标签： javascript google-chrome internet-explorer firefox blur

【解决方案1】：

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

在 SO 上有很多重复的这个问题，只是没有 100% 有效的答案。再说一次，一旦您使用大型/复杂的应用程序，这个问题就不会经常出现。如果我需要用户操作的顺序，我只需将其保存为变量即可。

因此，如果您也需要它来处理第一个焦点，我的代码只会颠倒逻辑并使用“焦点”而不是模糊。如果在用户不单击另一个输入事件的情况下还需要发生模糊事件，我还将焦点事件处理程序绑定到页面上的任何单击事件。这种策略是跨浏览器的，它只是不漂亮和/或高效。

这并不完美，因为它会在第一次点击后触发两个事件，但这很容易解决。但是通过对代码进行一些操作，应该可以找到模拟所需行为的事件组合。（所以我需要更多关于控制台元素何时应该写入 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>

【讨论】：

谢谢。同时我使用了您在其他地方提到的浏览器检测方法（请参阅我的帖子的编辑）。