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

时间:2012-02-17 21:00:47

标签: javascript jquery

Blur事件似乎停止了click事件处理程序的工作?我有一个组合框,其中的选项仅在文本字段具有焦点时出现。选择选项链接应该会导致事件发生。

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

重现:

  1. 选择文本框
  2. 链接出现
  3. 点击链接
  4. 模糊甚至发生,链接消失
  5. 没有其他事情发生。
  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');
    

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

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

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

    3. 我可以想到更多。

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

      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 个答案:

答案 0 :(得分:77)

click之后

blur个事件触发器,因此链接被隐藏。 <{1}}使用click代替mousedown,它将起作用。

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

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

<强> Demo

答案 1 :(得分:5)

您可以尝试mousedown事件而不是click

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

这显然不是最佳解决方案,因为mousedown事件对用户的实现方式与click事件不同。不幸的是,blur事件也会取消mouseup个事件。

答案 2 :(得分:2)

执行click mousedown上应发生的操作是不好的用户体验。相反,click有效构成了什么? mousedownmouseup

因此,请停止在mousedown处理程序中传播mousedown事件,并在mouseup处理程序中执行操作。

ReactJS中的一个例子:

<a onMouseDown={e => e.preventDefault()}
   onMouseUp={() => alert("CLICK")}>
   Click me!
</a>

答案 3 :(得分:1)

  

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应填充link元素,因此在模糊处理程序中,如果单击的元素位于容器内(或直接与链接进行比较),则可以选择不隐藏容器:

$('#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)

答案 4 :(得分:1)

如果this.menuTarget.classList.add("hidden")是隐藏可点击菜单的模糊行为,那么我成功地等待了100毫秒,然后才调用它。

setTimeout(() => {
  this.menuTarget.classList.add()
}, 100)

这可以使点击事件在隐藏之前在menuTarget DOM上进行处理。

答案 5 :(得分:0)

我知道这是以后的答复,但是我遇到了同样的问题,其中许多解决方案在我的情况下并没有真正起作用。 mousedown在表单上不起作用,它可能导致Enter键上的Enter键功能发生更改。相反,您可以在_mouseclick中将变量mousedown设置为true,在blur中对其进行检查,如果为true,则可以对preventDefault()进行检查。然后,在mouseup中将变量设置为false。除非有人能想到,否则我没有发现任何问题。

答案 6 :(得分:0)

我在使用 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 中测试。