gpt4 book ai didi

javascript - Firefox .on ('focusin' ) 无法处理图像?

转载 作者:行者123 更新时间:2023-11-28 00:11:05 24 4
gpt4 key购买 nike

我一直在修改 jQuery 事件,并且偶然发现了一个非常有趣的情况(Firefox bug?),我找不到任何解释。我想对某些 HTML 元素使用焦点事件,但似乎有一些限制,例如:

  • 段落、div(可能还有其他容器)需要将 contenteditable 属性设置为 true 以使它们“可聚焦”
  • 即使使用 contenteditable="true",图像也无法在 Firefox 下运行(但可以在 Chrome 和 Opera 下运行)。然而,添加属性 tabIndex 似乎可以解决问题,但这是一种黑客行为,而且看起来并不是正确的解决方案。

那么,什么是正确的行为呢?是 Firefox 有 bug,还是 Chrome/Opera 的行为太过慷慨,允许焦点事件用于所有内容可编辑的内容?另外,Firefox 是否还有其他侵入性较小的解决方法?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<img src="http://investorplace.com/wp-content/uploads/2014/02/bacon.jpg" id="img" contenteditable="true" />

<div id="p" contenteditable="true">text test text</div>

<input id="inp" />
</body>
</html>

http://pastebin.com/WeJ4XS8t

最佳答案

Firefox 仍然不支持 focusinfocusout

错误报告: https://bugzilla.mozilla.org/show_bug.cgi?id=687787

Polyfill: ( https://gist.github.com/nuxodin/9250e56a3ce6c0446efa )

!function(){
var w = window,
d = w.document;

if( w.onfocusin === undefined ){
d.addEventListener('focus' ,addPolyfill ,true);
d.addEventListener('blur' ,addPolyfill ,true);
d.addEventListener('focusin' ,removePolyfill ,true);
d.addEventListener('focusout' ,removePolyfill ,true);
}
function addPolyfill(e){
var type = e.type === 'focus' ? 'focusin' : 'focusout';
var event = new CustomEvent(type, { bubbles:true, cancelable:false });
event.c1Generated = true;
e.target.dispatchEvent( event );
}
function removePolyfill(e){
if(!e.c1Generated){ // focus after focusin, so chrome will the first time trigger tow times focusin
d.removeEventListener('focus' ,addPolyfill ,true);
d.removeEventListener('blur' ,addPolyfill ,true);
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
}
setTimeout(function(){
d.removeEventListener('focusin' ,removePolyfill ,true);
d.removeEventListener('focusout' ,removePolyfill ,true);
});
}

}();

关于javascript - Firefox .on ('focusin' ) 无法处理图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30870586/

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