jQuery实现仅在指定类容器内触发textarea的blur事件

这个问题的核心在于blur事件的触发时机比click早——当你点击容器外的元素时，textarea的blur会先执行，这时候我们还没法直接拿到点击的目标元素。所以得换个思路，提前记录点击的位置，再在blur里做判断：

实现思路 #

• 用一个变量标记是否点击了指定容器内的元素
• 在mousedown事件（比blur更早触发）里更新这个标记
• 在textarea的blur事件中，根据标记决定是否执行目标函数
• 额外处理非鼠标点击的焦点转移情况（比如按Tab键切换）

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  Container
  <textarea>123</textarea>
</div>
<div class="outside">
  Outside
</div>

<style>
.container { height: 80px; width: 100%; background: green }
.outside { height: 80px; width: 100%; background: blue }
</style>

<script>
// 标记：是否点击/聚焦在容器内
let isTargetInContainer = false;

// 监听全局mousedown，提前判断点击位置
$(document).on('mousedown', function(e) {
  isTargetInContainer = $(e.target).closest('.container').length > 0;
});

$('textarea').on('blur', function() {
  // 两种情况执行函数：1. 点击了容器内；2. 焦点切换到容器内的元素（比如Tab键）
  const focusInContainer = $(document.activeElement).closest('.container').length > 0;
  if (isTargetInContainer || focusInContainer) {
    TestFunction();
  }
  // 重置标记，避免影响下次判断
  isTargetInContainer = false;
});

function TestFunction() {
  console.log('called');
}
</script>

代码说明 #

1. mousedown事件监听：当用户按下鼠标时，立刻用closest()向上查找点击元素的父级，判断是否在.container内部，同步更新标记变量。
2. blur事件判断：
   • 先检查标记变量，处理鼠标点击的场景
   • 再检查当前获得焦点的元素是否在容器内，处理Tab键切换焦点的场景
3. 重置标记：每次blur事件结束后重置标记，确保下次判断的准确性。

这样就能实现：只有当textarea失去焦点后，目标焦点落在.container内部（不管是点击还是Tab切换），才会执行TestFunction，点击容器外则不触发函数逻辑。

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