gpt4 book ai didi

javascript - 如何跨浏览器使用 relatedTarget?

转载 作者:太空宇宙 更新时间:2023-11-04 16:13:11 24 4
gpt4 key购买 nike

Firefox 支持 relativeTarget 来实现 focus/blur,但 不支持 focusin/focusout 事件。

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

Chrome 两者都支持。

有没有办法跨浏览器使用latedTarget

这是一个 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, …)

最佳答案

(作为答案发布,以便我可以使用代码示例。尽管这更像是一条评论。)

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

因此,如果您也需要它为第一个焦点工作,我的代码只会反转逻辑并使用“焦点”而不是模糊。如果用户没有单击另一个输入事件也需要发生模糊事件,那么我还将焦点事件处理程序绑定(bind)到页面上的任何单击事件。这种策略是跨浏览器的,只是不漂亮和/或高效。

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

关于javascript - 如何跨浏览器使用 relatedTarget?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41299372/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com