[英]Blur event stops click event from working?
似乎 Blur 事件停止了单击事件处理程序的工作? 我有一个组合框,其中选项仅在文本字段具有焦点时出现。 选择一个选项链接应该会导致一个事件发生。
我在这里有一个小提琴示例: http : //jsfiddle.net/uXq5p/6/
重现:
预期行为:
在第 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');
我在这个网站上发现了其他一些有类似问题的问题。 似乎有两种解决方案:
使用延迟。 这很糟糕,因为它在隐藏和单击事件处理程序之间创建了竞争条件。 它也很草率。
使用mousedown
事件。 但这也不是一个很好的解决方案,因为click
是链接的正确事件。 从用户体验的角度来看, 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
)在模糊之前触发?
click
事件在blur
后触发,因此链接被隐藏。 而不是click
使用mousedown
它会起作用。
$('.ShippingGroupLinkList').live("mousedown", function(e) {
alert('You wont see me if your cursor was in the text box');
});
另一种选择是在隐藏blur
事件的链接之前有一些延迟。 由您决定采用哪种方法。
您可以尝试使用mousedown
事件而不是click
。
$('.ShippingGroupLinkList').live("mousedown", function(e) {
alert('You wont see me if your cursor was in the text box');
});
这显然不是最好的解决方案,因为对于用户来说, mousedown
事件的实现方式与click
事件的实现方式不同。 不幸的是, blur
事件也会取消mouseup
事件。
执行应该在click
mousedown
发生的操作是糟糕的用户体验。 相反, click
有效地由什么组成? 一个mousedown
和一个mouseup
。
因此,在mousedown
处理程序中停止mousedown
事件的传播,并在mouseup
处理程序中执行操作。
ReactJS 中的一个例子:
<a onMouseDown={e => e.preventDefault()}
onMouseUp={() => alert("CLICK")}>
Click me!
</a>
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. 哪个元素现在具有焦点或两个焦点,哪个元素导致了模糊(而不是哪个元素正在模糊)。
您可能正在寻找的是e.relatedTarget 。 因此,当单击链接时, e.relatedTarget
应填充链接元素,因此在您的模糊处理程序中,如果单击的元素在容器内(或直接与链接进行比较),您可以选择不隐藏容器:
$('#ShippingGroup').blur(function(e)
{
if(!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
// Alt: (!e.relatedTarget || $(e.relatedTarget) == $('.ShippingGroupLinkList'))
$('#ShippingGroupListWrapper').css('display','none'); // hide it.
}
}
(对于blur
事件,旧浏览器可能不支持relatedTarget
,但它似乎适用于最新的 Chrome、Firefox 和 Safari)
如果this.menuTarget.classList.add("hidden")
是隐藏可点击菜单的模糊行为,那么我在调用它之前等待 100 毫秒就成功了。
setTimeout(() => {
this.menuTarget.classList.add()
}, 100)
这允许在menuTarget
DOM 隐藏之前处理单击事件。
我知道这是后来的回复,但我遇到了同样的问题,而且很多这些解决方案在我的场景中并没有真正起作用。 mousedown
对表单不起作用,它可能导致提交按钮上的输入键功能发生变化。 相反,您可以在mousedown
设置一个变量_mouseclick
true ,在blur
检查它,如果为 true 则preventDefault()
。 然后,在mouseup
设置变量 false。 我没有看到这方面的问题,除非有人能想到任何问题。
我在使用 jQuery 模糊、单击处理程序时遇到了类似的问题,其中我有一个输入名称字段和一个保存按钮。 使用模糊事件将名称填充到标题占位符中。 但是,当我们在输入名称后立即单击保存时,只会触发模糊事件,而忽略保存 btn 单击事件。
我使用的技巧是利用我们从模糊事件中获得的事件对象并检查 event.relatedTarget。
PFB 对我有用的代码:
$("#inputName").blur(function (event) {
title = event.target.value;
//since blur stops an immediate click event from firing - Firing click event here
if (event.relatedTarget ? event.relatedTarget.id == "btnSave" : false) {
saveBtn();
}
});
$("#btnSave").click(SaveBtn)
正如本线程中已经讨论的那样 - 这是由于同时触发时模糊事件阻塞了单击事件。 因此,我为 Save Btn 注册了一个单击事件,该函数调用了一个函数,当模糊事件的相关目标是 Save 按钮以补偿未触发的单击事件时,也会调用该函数。 注意:在使用原生 onclick 和 onblur 处理程序时没有注意到这个问题 - 在 html 中测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.