事件 - htmx:oobBeforeSwap

htmx:oobBeforeSwap 是一个 在 HTMX 执行 OOB（Out-Of-Band）内容交换前触发的事件。

当服务器返回的响应中包含 hx-oob 属性的元素（用于将内容插入非目标区域的 DOM 元素中），HTMX 在真正替换目标元素之前会触发该事件。

你可以：

• 检查要插入的内容；

• 修改它；

• 阻止该 OOB 替换行为（使用 event.preventDefault()）；

事件参数

• detail.elt - 发送请求的元素
• detail.shouldSwap - 是否交换内容（默认为true）
• detail.target - 交换的目标
• detail.fragment - 响应片段

示例：拦截并修改 OOB 替换内容

<!-- 页面上的通知栏 -->
<div id="notification">暂无消息</div>

<!-- 触发请求的按钮 -->
<button hx-get="/oob-message" hx-target="#content">加载并更新通知</button>

<!-- 假设 /oob-message 返回以下响应 -->
<!-- <div id="notification" hx-oob="true">系统将维护</div> -->

<script>
  document.body.addEventListener("htmx:oobBeforeSwap", function (event) {
    if (event.detail.target.id === "notification") {
      // 添加样式或前缀
      event.detail.content.innerHTML = "[拦截修改] " + event.detail.content.innerHTML;

      // 或者你可以取消替换：
      // event.preventDefault();
    }
  });
</script>

阻止某个 OOB 替换（高级用法）

document.body.addEventListener("htmx:oobBeforeSwap", function (event) {
  if (event.detail.target.id === "notification") {
    console.warn("阻止系统消息更新");
    event.preventDefault(); // 阻止插入行为
  }
});