Javascript 通过将焦点放在子元素上并单击子元素外部来处理父元素的模糊事件

Javascript 通过将焦点放在子元素上并单击子元素外部来处理父元素的模糊事件,javascript,jquery,onblur,event-bubbling,onfocus,Javascript,Jquery,Onblur,Event Bubbling,Onfocus,我有一个包含子框输入的“父div”type=number。当用户在输入框外单击时,我使用父div的blur或focusout事件在其他位置使用输入值 我还需要在某个地方使用$('inputbox').trigger('focus'),它会不自觉地触发“parent div”的blur事件并对该事件运行代码 请给出一个解决方案来停止子元素焦点上的父模糊事件,或者给出一种方法来确定是通过子元素上的触发器(“焦点”)还是通过用户在父div之外单击来进行焦点 我只需要在用户单击外部时触发父模糊,而不是在

我有一个包含子框输入的“父div”
type=number
。当用户在输入框外单击时,我使用父div的
blur
focusout
事件在其他位置使用输入值

我还需要在某个地方使用
$('inputbox').trigger('focus')
,它会不自觉地触发“parent div”的blur事件并对该事件运行代码

请给出一个解决方案来停止子元素焦点上的父模糊事件,或者给出一种方法来确定是通过子元素上的触发器(“焦点”)还是通过用户在父div之外单击来进行焦点


我只需要在用户单击外部时触发父模糊,而不是在通过代码触发焦点时触发父模糊。

使用jquery,您可以非常轻松地创建自定义事件,例如:

$('inputbox').trigger('special-focus');
然后,您可以像等待任何其他事件一样等待此事件:

$('div').on('special-focus' , function(){ ... } );
这将防止您的事件干扰内置事件

我猜如果你不想使用这个建议,那么就在你的点击处理程序或孩子的焦点处理程序中这样做

 .on('focus' , function(e){
    e.stopPropagation();
    e.preventDefault();
   /// the rest of your code ...
 });
这将停止事件向父元素的传播。在子元素的('focus',…)之前,在父元素的('blur',…)上激发子元素
包含子输入框的父div的Anyways 我们可以使用
$('input').trigger('special-focus')
然后


现在,父母的模糊不会激发孩子的注意力。
这对我来说很有效。i、 e.在特殊焦点内关闭和打开父级模糊事件。

感谢Scott Selby:)

对我有效的方法是在handler函数中检查
eventObject
对象的
relatedTarget
属性

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

这对我来说非常有效:

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

你能和我分享一把小提琴吗?请看最后的答案。谢谢,但如果我必须使用.focus()来关注输入框,它会触发家长的模糊。编辑答案,添加了另一个适合你的解决方案,你可以附加到点击事件,谢谢你,史葛,我可以把你的答案作为答案。如果你不打算选择我的答案作为正确的答案,那么你可能想考虑一个完整的答案,你做了什么来获得这个代码的工作。访问此页面的其他人不会在此处取消对自定义事件的响应,而不会显示该事件是如何触发的。on('focus',function(e){e.stopPropagation();etc在这里不起作用,因为父模糊会首先触发。。工作代码也包含模糊事件的开和关,这就是为什么我没有将您的答案标记为corrent mate,但建议您自定义事件仍然很有用。如果我将此标记正确,开发人员将继续尝试e.stopPropagation()我只是想写一个完整的答案,我并没有告诉你,你也必须,我不是StAccess公司的老板,我只是说你应该考虑。完整的我并不意味着我是正确的,我只是想填写你离开OuttoKayMalk的部分,你的答案也给出了一个强有力的指导。值得一试。
if (e.relatedTarget === null) ...