模糊事件会停止点击事件吗？ [英] Blur event stops click event from working?
问题描述
Blur事件似乎停止了click事件处理程序的工作？我有一个组合框，其中的选项仅在文本字段具有焦点时出现。选择一个选项链接会导致事件发生。
It appears that the Blur event stops the click event handler from working? I have a combo box where the options only appear when the text field has focus. Choosing an option link should cause an event to occur.
我这里有一个小提琴示例： http://jsfiddle.net/uXq5p/6/
I have a fiddle example here: http://jsfiddle.net/uXq5p/6/
重现：
- 选择文本框
- 链接显示
- 点击链接
- 模糊甚至发生，链接消失
- 没有其他事情发生。
- Select the text box
- Links appear
- Click a link
- The blur even occurs and the links disappear
- Nothing else happens.
预期行为：
在第5步，模糊发生后，点击甚至也应该触发。我如何实现这一目标？
On step 5, after blur occurs, the click even should also then fire. How do I make that happen?
更新：
玩这个之后有一段时间，如果模糊事件使点击的元素无法点击，似乎有人已竭尽全力防止已经发生的点击事件被处理。
After playing with this for a while, it seems that someone has gone to great lengths to prevent an already-occurred click event from being handled if a blur event makes the clicked element Un-clickable.
例如：
$('#ShippingGroupListWrapper').css('left','-20px');
工作正常，但
$('#ShippingGroupListWrapper').css('left','-2000px');
阻止点击事件。
这似乎是Firefox中的一个错误，因为使元素无法点击可能会阻止 未来 点击，但 不 取消可以点击它时已经发生的那些。
This appears to be a bug in Firefox, since making an element un-clickable should prevent future clicks, but not cancel ones that have already occurred when it could be clicked.
阻止点击事件处理的其他因素：
Other things that prevent the click event from processing:
$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');
我在这个网站上发现了一些有类似问题的问题。似乎有两种解决方案：
I've found a few other questions on this site that are having similar problems. There seem to be two solutions floating around:
-
使用延迟。这很糟糕，因为它在隐藏和click事件处理程序之间创建了竞争条件。它也很草率。
Use a delay. This is bad because it creates a race condition between the hiding and the click event handler. Its also sloppy.
使用 mousedown 事件。但这不是一个很好的解决方案，因为点击 是链接的正确事件。从UX的角度来看， mousedown 的行为是违反直觉的，特别是因为在释放按钮之前无法通过将鼠标移离元素来取消单击。
Use the mousedown event. But this isn't a great solution either since click is the correct event for a link. The behavior of mousedown is counter-intuitive from a UX perspective, particularly since you can't cancel the click by moving the mouse off the element before releasing the button.
我可以想到更多。
3.使用 链接 上的 mouseover 和 mouseout 启用/禁用该字段的模糊事件。这不适用于键盘标签，因为不涉及鼠标。
3.Use mouseover and mouseout on the link to enable/disable the blur event for the field. This doesn't work with keyboard tabing since the mouse is not involved.
4.最佳解决方案如下：
4.The best solution would be something like:
$('#ShippingGroup').blur(function()
{
if($(document.activeElement) == $('.ShippingGroupLinkList'))
return; // The element that now has focus is a link, do nothing
$('#ShippingGroupListWrapper').css('display','none'); // hide it.
}
不幸的是， $（document.activeElement） 似乎总是返回body元素，而不是单击的那个。但也许有一种可靠的方法可以知道1.哪个元素现在有焦点或者哪个元素，哪个元素导致模糊（不是哪个元素在模糊处理程序中模糊。另外，还有其他事件（除了 mousedown ）在模糊之前触发吗？
Unfortunately, $(document.activeElement) seems to always return the body element, not the one that was clicked. But maybe if there was a reliable way to know either 1. which element now has focus or two, which element caused the blur (not which element is blurring) from within the blur handler. Also, is there any other event (besides mousedown) that fires before blur?
推荐答案
点击 blur 后的事件触发器链接被隐藏。而不是点击使用 mousedown 它将起作用。
click event triggers after the blur so the link gets hidden. Instead of click use mousedown it will work.
$('.ShippingGroupLinkList').live("mousedown", function(e) {
alert('You wont see me if your cursor was in the text box');
});
其他选择是在隐藏 blur <上的链接之前有一些延迟/ code>事件。它取决于你采用哪种方法。
Other alternative is to have some delay before you hide the links on blur event. Its upto you which approach to go for.
Demo
这篇关于模糊事件会停止点击事件吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
