模糊事件会停止点击事件吗？

Question

看来Blur事件会阻止click事件处理程序工作吗？我有一个组合框,其中的选项仅在文本字段具有焦点时出现.选择选项链接应该导致事件发生.

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

重现:

1. 选择文本框
2. 链接出现
3. 单击链接
4. 模糊甚至发生,链接消失
5. 没有其他事情发生.

预期行为:

在步骤5,模糊发生后,点击甚至也应该开始.我该如何做到这一点？

更新:

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

例如:

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

工作得很好,但是

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

阻止点击事件.

这似乎是在Firefox中的错误,因为让一个元素未点击应防止未来的点击,但没有取消的时候可以点击它已经发生的.

阻止click事件处理的其他因素:

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

我在这个网站上发现了一些有类似问题的问题.似乎有两种解决方案:

1. 使用延迟.这很糟糕,因为它在隐藏和click事件处理程序之间创建了竞争条件.它也很草率.

2. 使用该mousedown活动.但这不是一个很好的解决方案,因为它click 是链接的正确事件.mousedown从UX的角度来看,这种行为是违反直觉的,特别是因为在释放按钮之前无法通过将鼠标移离元素来取消单击.

我还能想到更多.

3.使用mouseover和mouseout在链接上启用/禁用字段的模糊事件.这不适用于键盘标签,因为不涉及鼠标.

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元素,而不是单击的元素.但也许有一种可靠的方法可以知道1.哪个元素现在具有焦点或两个,哪个元素导致模糊处理程序内的模糊(不是哪个元素模糊).此外,还有其他事件(除此之外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');
});

其他替代方法是在隐藏blur事件上的链接之前有一些延迟.它取决于你采取哪种方法.

演示

Answer 2

你可以试试这个mousedown活动而不是click.

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

这显然不是最佳解决方案,因为mousedown事件不是以与事件相同的方式实现的click.不幸的是,该blur活动也将取消mouseup活动.