处理子元素焦点和单击子元素外部引起的父元素模糊事件

Question

我有一个包含子框输入type=number的“父div”。当用户点击输入框以外的地方时，我使用父div的blur或focusout事件在其他地方使用输入值。

我还需要在某些地方使用$('inputbox').trigger('focus')，这会不希望地触发“父div”的模糊事件并在该事件上运行代码。

请提供一种停止子元素聚焦时父元素失焦事件的解决方案，或者提供一种查找聚焦是由子元素的trigger（'focus'）还是由用户单击父div之外的地方引起的方法。

我只需要在用户单击它以外的地方时才触发父级失焦事件，并且不需要在代码触发聚焦时触发。

- Umesh K.

---

你能分享一个 Fiddle http://jsfiddle.net 吗？ - gurvinder372

请查看最终答案。 - Umesh K.

Answer 1

这对我非常有效：

这个方法对我来说非常完美：

if (e.relatedTarget === null) ...

- Andres Cabrera

Answer 2

使用jQuery可以非常容易地创建自定义事件，例如：

$('inputbox').trigger('special-focus');

然后，您可以像处理其他事件一样等待此事件：

$('div').on('special-focus' , function(){ ... } );

这将防止你的事件干扰内置事件。

如果你不想使用这个建议，那么可以在你的点击处理程序或子元素的焦点处理程序中执行此操作。

 .on('focus' , function(e){
    e.stopPropagation();
    e.preventDefault();
   /// the rest of your code ...
 });

这将停止事件传播到父元素。

- Scott Selby

---

谢谢，但是如果我必须使用.focus()来聚焦输入框，并且它会触发父级的模糊事件。 - Umesh K.

编辑回答，添加了另一种适合您的解决方案。 - Scott Selby

你可以附加到点击事件，但你可能需要尝试一下在哪里捕获该事件。 - Scott Selby

谢谢Scott...我已经将解决方案发布为答案。 - Umesh K.

Answer 3

对我有用的是在处理程序函数中检查eventObject对象的relatedTarget属性。

$("#parentDiv").focusout(function (eventObject) {
    if (eventObject.relatedTarget.id === "childInputId")
        /// childInput is getting focus
    else
        /// childInput is not getting focus
});

- Cody Stott

Answer 4

.on('blur',...) 父元素的事件会在 子元素 的 .on('focus' ,...) 之前触发。
无论如何，对于包含子输入框的父 div，我们可以使用
$('input').trigger('special-focus');
然后

  $("#form" ).on('special-focus', '.parentdiv' , function(event) {
          $("#form" ).off('blur', '.parentdiv');
          $(event.target).focus();
          $("#form" ).on('blur', '.parentdiv' , showValuesOnBlur);
     });

现在父元素的模糊事件不会在子元素获得焦点时触发。
这对我很有用。即在 special-focus 中关闭和打开父元素的模糊事件。
感谢 Scott Selby :)

- Umesh K.

---

如果您不打算选择我的答案作为正确答案，那么您可能需要考虑提供一个完整的答案，说明您是如何使这段代码工作的。其他访问此页面的人不会理解仅仅在那里添加一个自定义事件而不显示它是如何被触发的。 - Scott Selby

.on('focus' , function(e){ e.stopPropagation(); 等在这里是不起作用的，因为父级模糊事件会先触发.. 此外，工作代码包含模糊事件的on和off，所以我没有标记你的答案为正确，但你提出的自定义事件建议仍然很有用。如果我标记了这个正确，开发者会继续尝试e.stopPropagation()，而这在这里不起作用。 - Umesh K.

我明白了，没问题，我只是想写一个完整的答案，我也不是要求你必须这么做，我不是 Stackoverflow 的老板，我只是建议你考虑一下。当我说“完整”的时候，并不是指我的答案是正确的，我只是想填补你遗漏的部分。 - Scott Selby

好的伙计，你的回答给了一个强有力的方向去工作。值得赞赏。 - Umesh K.