模糊事件停止点击事件工作？

看来，模糊事件停止点击事件处理程序工作？ 我有一个combobox，其中的选项只有当文本字段有焦点时出现。 select一个选项链接应该导致事件发生。

我在这里有一个小提琴的例子： http : //jsfiddle.net/uXq5p/6/

重现：

1. select文本框
2. 链接出现
3. 点击一个链接
4. 甚至发生模糊，链接消失
5. 没有其他事情发生

预期的行为：

在第5步，模糊发生后，点击甚至应该也会发射。 我如何做到这一点？

更新：

玩了一段时间后，似乎有人已经竭尽全力，以防止已经发生的点击事件被处理，如果模糊事件使点击元素不可点击。

例如：

$('#ShippingGroupListWrapper').css('left','-20px'); 

工作得很好，但是

 $('#ShippingGroupListWrapper').css('left','-2000px'); 

防止点击事件。

这似乎是Firefox中的一个错误，因为使元素不可点击应该可以防止将来的点击，但是不能取消点击时已经发生的点击。

其他的事情阻止点击事件处理：

 $('#ShippingGroupListWrapper').css('z-index','-20'); $('#ShippingGroupListWrapper').css('display','none'); $('#ShippingGroupListWrapper').css('visibility','hidden'); $('#ShippingGroupListWrapper').css('opacity','.5'); 

我在这个网站上发现了一些类似问题的其他问题。 似乎有两个解决scheme：

1. 使用延迟。 这是不好的，因为它在隐藏和单击事件处理程序之间创build竞争条件。 它也马虎。

2. 使用mousedown事件。 但是，这不是一个好的解决scheme，因为click 是一个链接的正确事件。 从UX的angular度来看， mousedown的行为是违反直觉的，尤其是因为在释放button之前，您不能通过将鼠标从元素上移开来取消点击。

我能想到更多。

3.使用链接上的mouseover和mouseover来启用/禁用该字段的模糊事件。 由于不涉及鼠标，因此这不适用于键盘制表。

4.最好的解决办法是这样的：

 $('#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元素，而不是被单击的元素。 但也许如果有一个可靠的方法来知道哪一个元素现在有焦点或两个，哪个元素造成模糊处理器内的模糊（而不是哪个元素模糊）。 另外，还有没有其他的事件（除了mousedown ）在模糊之前发生？

Answer 1

click blur后的事件触发器，以便隐藏链接。 而不是click使用mousedown它将工作。

 $('.ShippingGroupLinkList').live("mousedown", function(e) { alert('You wont see me if your cursor was in the text box'); }); 

其他的select是在隐藏blur事件的链接之前有一些延迟。 它取决于你的方法去。

演示

Answer 2

你可以尝试mousedown事件，而不是click 。

 $('.ShippingGroupLinkList').live("mousedown", function(e) { alert('You wont see me if your cursor was in the text box'); }); 

这显然不是最好的解决scheme，因为对于用户来说，没有以click事件相同的方式实现mousedown事件。 不幸的是， blur事件也会取消mouseup事件。

Answer 3

4.最好的解决办法是这样的：

 $('#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元素，而不是被单击的元素。 但也许如果有一个可靠的方法来知道哪一个元素现在有焦点或两个，哪个元素造成模糊处理器内的模糊（而不是哪个元素模糊）。

你可能要找的是e.relatedTarget 。 因此，当点击链接时， e.relatedTarget应该填充链接元素，所以在你的模糊处理程序中，如果点击的元素在容器中（或直接与链接比较），可以select不隐藏容器：

 $('#ShippingGroup').blur(function(e) { if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) { // Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList')) $('#ShippingGroupListWrapper').css('display','none'); // hide it. } } 

（ relatedTarget可能在旧版浏览器中不支持blur事件，但它似乎可用于最新的Chrome，Firefox和Safari）