模糊事件是否使单击事件停止工作？
模糊事件似乎会使单击事件处理程序停止工作？我有一个组合框，只有当文本字段有焦点时，选项才会出现。选择一个选项链接应该会导致事件发生。
这里有一个小提琴示例：http://jsfiddle.net/uXq5p/6/
复制：
- 选择文本框
- links
a link
- the blur and the link
disappear
- Nothing
预期行为：
在步骤5中，在模糊发生后，点击甚至应该也会触发。我怎样才能做到这一点呢？
更新：
在尝试了一段时间之后，如果模糊事件使得点击的元素不可点击，那么似乎有人已经花了很大力气来阻止处理已经发生的点击事件。
例如：
$('#ShippingGroupListWrapper').css('left','-20px');工作正常，但是
$('#ShippingGroupListWrapper').css('left','-2000px');防止单击事件。
这似乎是火狐的一个bug，因为让一个元素不可点击应该会阻止未来的点击，而不是在可以点击的时候已经发生的取消。
阻止click事件处理的其他事情：
$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');我在这个网站上发现了其他一些有类似问题的问题。似乎有两种解决方案：
- 使用延迟。这很糟糕，因为它在隐藏事件处理程序和单击事件处理程序之间创建了争用条件。它也很草率。
- 使用
mousedown事件。但这也不是一个很好的解决方案，因为click是链接的正确事件。从UX的角度来看，mousedown的行为是违反直觉的，特别是因为您不能在释放按钮之前通过将鼠标从元素上移开来取消单击。
我还能想到更多。
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)会触发？
回答 7
Stack Overflow用户
发布于 2012-02-18 05:07:10
在blur之后触发click事件，以便隐藏链接。用mousedown代替click，它就可以工作了。
$('.ShippingGroupLinkList').live("mousedown", function(e) {
alert('You wont see me if your cursor was in the text box');
});另一种选择是在隐藏blur事件上的链接之前有一些延迟。选择哪种方法由你决定。
Stack Overflow用户
发布于 2012-02-18 05:19:26
您可以尝试使用mousedown事件而不是click。
$('.ShippingGroupLinkList').live("mousedown", function(e) {
alert('You wont see me if your cursor was in the text box');
});这显然不是最好的解决方案，因为对于用户来说，mousedown事件的实现方式不同于click事件。不幸的是，blur事件也会抵消mouseup事件。
Stack Overflow用户
发布于 2018-02-17 03:09:38
在mousedown上执行本应在click上执行的操作是糟糕的UX。相反，click实际上是由什么组成的？一个mousedown和一个mouseup。
因此，应停止在mousedown处理程序中传播mousedown事件，并在mouseup处理程序中执行该操作。
ReactJS中的一个示例：
<a onMouseDown={e => e.preventDefault()}
onMouseUp={() => alert("CLICK")}>
Click me!
</a>https://stackoverflow.com/questions/9335325
复制相似问题