仅在退出父元素后触发子事件答案

【问题标题】：child event trigger only after exiting parent element仅在退出父元素后触发子事件
【发布时间】：2016-05-17 19:37:25
【问题描述】：

我在父 div 中有两个子输入。一旦用户退出父元素，我想触发一个事件，但不是当用户从一个孩子直接移动到另一个孩子时。在此示例中，我要求用户在单独的输入中输入日期和时间：

<div id="form">
  <div id="dateTime">
    <input id="date">
    <input id="time">
  </div>
</div>

我尝试如下使用“.focusout”和“.blur”但没有成功 - 我的意思是当用户从“日期”到“时间”标签时触发事件，而不是等到用户标签出来“时间”并完全退出父“日期时间”div。

$("#form").on('focusout', '#dateTime', function() {
  alert ('User has exited the "dateTime" div.');
});
$("#form").on('blur', '#dateTime', function() {
  alert ('User has exited the "dateTime" div.');
});

是我的方法在 HTML 结构或使用 JQuery 方面有问题吗？

【问题讨论】：

看看stackoverflow.com/a/7385673/5549391
谢谢。那里的热烈讨论帮助我理解了传播的有用性和局限性。
它总是“自下而上”，这让我改变了我的方法，在触发下一个函数之前简单地测试输入元素是否为空。干杯

标签： jquery parent blur children focusout

【解决方案1】：

我还没有尝试过，但我认为这应该可以工作

$("#dateTime").focusout(function() {
  if ($(this).has(document.activeElement).length === 0) {
    alert('User has exited the "dateTime" div.');
  }
});

【讨论】：