jquery focusin（）并防止冒泡 [英] jquery focusin() and preventing bubbling
问题描述
更新2：
我睡觉了，然后掀起了一些示例代码，试图进一步找出问题所在。
I slept on it and then whipped up some sample code to try and further figure out the issue.
这是一个使用firebug的console.log来显示哪个对象触发focusin事件的示例：
Here's a sample using the console.log of firebug to show you which object is triggering the focusin event:
1）点击第一个链接：黄色div显示
2）点击Tab键：它应该显示黄色div内的链接
1) click the first link: yellow div shows 2) hit the tab key: It should tab into the link within the yellow div
它确实如此，但它会触发focusin事件，并且由于某种原因，它似乎再次冒泡到红色div，然后被告知关闭黄色div。
It does that, but then it triggers the focusin event and, for some reason, it appears to bubble up again to the red div, which is told to then close the yellow div.
甚至在我告诉黄色div不要传播焦点事件之后：
This is even after I've told the yellow div to not propogate focusin events:
$('#innerDiv').focusin(function(e){e.stopPropagation()});
然后我尝试在父div上附加focusin事件后我专注于内部div。
I then tried attaching the focusin event on the parent div only AFTER I focusin on the inner div.
当内部div中第一个链接的标签确实在父div上设置focusin事件时会发生什么。这很好！然后Tabid到innerdiv中的下一个链接再次关闭了div的焦点事件。
What happens there is that tabbing to the first link in the inner div does set up the focusin event on the parent div. This is good! But then tabbing to the very next link within the innerdiv bubbles up the focusin event again closing the div.
所以，我想我仍然难倒。看来我似乎无法停止焦点冒泡。思考？理论？
So, I guess I'm still stumped. It does appear that I can not stop focusin from bubbling up. Thoughts? Theories?
以下原帖...
============ ================
============================
我通过onclick事件显示div。如果你点击div之外，我想隐藏它。为此，我在正文上绑定了一次点击事件：
I'm showing a div via an onclick event. If you click outside the div, I want to hide it. To do so, I'm binding a one time click event on the body:
$('body').one('click.myDivPopup', function(e) {
...close my div...
});
在div本身内，我告诉它不要传播事件，以便实际点击div赢得' t触发身体上的点击：
Within the div itself, I tell it to not propogate events so that actually clicking within the div won't trigger a click on the body:
$myDiv.click(function(e){e.stopPropagation()});
这样可以正常使用。
我还想隐藏div，如果一个选项卡跳出div。
I also want to hide the div if one tabs out of the div.
我的想法是，在那种情况下，我可以在身体上使用focusin事件：
My thinking was that in that scenario, I could use a focusin event on the body:
$('body').one('focusin.myDivPopup', function(e) {
...close my div...
});
同样，我不希望事件冒出div本身，所以添加了这个：
Again, I don't want the events to bubble out of the div itself, so added this:
$myDiv.focusin(function(e){e.preventDefault()});
这不起作用。在myDiv中的元素内更改焦点会触发body上的focusin事件。
This does NOT work. Changing focus within elements within myDiv triggers the focusin event on the body.
这可能是jQuery中的错误吗？如果是这样，有更好的方法来实现这个目标吗？
Is this maybe a bug in jQuery? If so is there a better way to accomplish this?
更新：
问题似乎在那里似乎没有办法确定DIV是否失去焦点，因为它永远不会有焦点。我的解决方案逻辑是看看ELSE是否有焦点在div之外（因此使用focusin）但是我遇到了div中焦点事件的问题，似乎通过触发它在身体上冒出来。
The issue seems to be that there seems to be no way to determine if the DIV has lost focus, since it can never have focus. My solution logic was to see if something ELSE had focus that was outside the div (hence using focusin) but I'm running into the issue of the focusin events within the div seemingly bubbling out there by triggering it on the body.
目前，我认为我的解决方案必须在弹出窗口中添加一个CLOSE elment，然后让人们明确触发它。虽然不太理想，尤其是键盘导航。
For now, I think my solution is going to have to be adding a CLOSE elment to the pop-up and then having people have to explicitly trigger that. Not ideal though, especially for keyboard navigation.
推荐答案
如果你想使用focusin而不是利用事件冒泡，你为什么不用焦点 ...？
If you want to use focusin but not utilise event bubbling, why don't you just use focus...?
这篇关于jquery focusin（）并防止冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
