如何跨浏览器使用relatedTarget？ [英] How to use relatedTarget across browsers?
问题描述
relatedTarget 用于焦点 / blur 但不是 focusin / focusout 事件 IE仅支持 focusin / focusout 但 not Chrome浏览器同时支持焦点 / blur 事件。 。
在浏览器中是否有一种方法可以使用 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';
$ / code> 然后 ... .addEventListener（eventType，...） 。
（作为答案发布，所以我可以使用代码示例。 ）
在这个问题上有很多重复的问题，只是没有100％的答案。然后再次，这个问题不会出现，往往一旦你到大/复杂的应用程序。如果我需要一个用户操作的东西的订单，我只是将其保存为一个变量。
所以我的代码只会逆转逻辑和使用焦点，而不是模糊如果你需要它为第一个焦点工作。
如果模糊事件也需要发生，如果用户不点击另一个输入事件，我也会绑定焦点事件处理程序到页面上的任何点击事件。
这种策略将是交叉浏览器，它只是不漂亮和/或高效。
这不是完美的，因为它会触发两个事件后第一次点击，但这可以很容易地解决。但是通过对代码进行一些调整，应该可以找到模拟所需行为的事件组合。 （所以我需要更多的细节，关于何时控制台元素应该得到的编写的ID或不是写一个确切的实现。）
<！DOCTYPE html>
< html lang =en>
< head>
< title>< / title>
< / head>
< body>
< input id =onevalue =focus me first>
< input id =twovalue =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）;
//用于非输入元素焦点的可选处理程序，也就是模糊预先点击的元素。
document.addEventListener（'click'，focusHandler）;
< / script>
< / body>
< / html>
Firefox supports relatedTarget for the focus/blur but not the focusin/focusout event.
IE supports it only for the focusin/focusout but not the focus/blur event.
Chrome supports both.
Is there a way to use relatedTarget across browsers?
Here is a blur example (working in Chrome and FF but not IE):
https://jsfiddle.net/rnyqy78m/
And here a focusin example (working in Chrome and IE but not FF):
https://jsfiddle.net/rnyqy78m/1/
Edit
I ended up using browser detection. So I use
var eventType;
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
eventType = 'blur';
} else {
eventType = 'focusout';
}
and then ….addEventListener(eventType, …).
(Posting as an answer so I can use code sample. Although this is more meant to be a comment.)
There's alot of duplicates of this question on SO, just no answers that work 100% of the time. Then again, this problem doesn't come up that often once you get to large/complex apps. If I need the order a user manipulated stuff in, I just save it as a variable.
So my code would just reverse the logic and use 'focus' instead of blur if you need it to work for the first focus as well. If the blur event also needs to happen if the user doesn't click another input event, I would also bind the focus event handler to any click event on the page. This kind of strategy would be crossbrowser, it's just not pretty and/or efficient.
This isn't perfect, since it will trigger two events after the first click, but that can be solved easily. But with playign around with the code a bit, it should be possible to find a combination of events that mimic the behaviour needed. (So I'd need more details on when the console element should get the id written or not to write anm exact implementation.)
<!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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
