如何为父元素div.record触发仅离开当前记录时生效的focusout类事件

你遇到的是focusout事件的冒泡特性导致的正常现象：同record内的input失焦时，事件会向上冒泡到父级.record节点，所以会触发你绑定的处理函数。

可行实现方案 #

核心逻辑是在focusout事件触发时，判断新获得焦点的元素是否属于当前.record的后代节点，只有不属于时才执行提交逻辑。

代码实现 #

原生JavaScript版本

// 给所有.record绑定focusout事件
document.querySelectorAll('.record').forEach(record => {
  record.addEventListener('focusout', e => {
    // e.relatedTarget 是即将获得焦点的元素
    // 如果新焦点元素不存在（点击空白处），或者不在当前record内部，就触发提交
    if (!record.contains(e.relatedTarget)) {
      // 这里写你的数据提交逻辑
      console.log('离开record：', record.id, '执行提交')
    }
  })
})

jQuery版本

$('.record').on('focusout', function(e) {
  if (!$(this).has(e.relatedTarget).length) {
    // 这里写你的数据提交逻辑
    console.log('离开record：', this.id, '执行提交')
  }
})

逻辑说明 #

• 同个record内部切换input时，e.relatedTarget是当前record内的另一个input，contains判断为真，不会触发提交
• 切换到其他record的元素、点击页面空白区域、切换到浏览器其他标签页等场景下，e.relatedTarget要么是外部元素，要么为null，contains判断为假，会触发提交逻辑，完全匹配需求。

内容的提问来源于stack exchange，提问作者Dirk Albrecht