事件 - htmx:sendAbort

htmx:sendAbort 是 HTMX 中的一个事件，在一个请求即将被取消或被替代时触发。这通常发生在：

• 用户点击某个链接或按钮，触发新的请求，而之前的请求还未完成

• HTMX 因内部逻辑取消了某个即将发送的请求（如快速点击多次）

事件参数

• detail.xhr - XMLHttpRequest
• detail.elt - 触发请求的元素
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置

常见触发场景

场景	示例描述
用户连续点击按钮	多次点击提交按钮，旧请求被取消
同一个元素快速多次触发请求	比如 hx-trigger="keyup changed delay:200ms"，键盘快速输入会取消旧请求
hx-get/hx-post 在短时间内被替换	新请求会中止旧请求，触发 htmx:sendAbort
手动调用 htmx.abort()	编程方式终止请求

示例代码

<button 
  hx-get="/search"
  hx-trigger="click"
  hx-target="#result"
  id="btn">
  点击请求
</button>

<div id="result">结果区域</div>

<script>
  document.body.addEventListener("htmx:sendAbort", function(evt) {
    console.warn("请求被中止：", evt.detail);
    document.querySelector("#result").innerText = "上一个请求已被取消。";
  });
</script>

使用场景

目标	如何使用 htmx:sendAbort
显示“请求取消”的 UI 提示	在请求取消时弹出提示
调试请求被抢占的原因	控制台记录取消请求
自动清理动画、加载状态	在请求被取消时终止加载动画
替代内容回退逻辑	提供保底内容（如重试按钮）

防止多次点击提交示例

<form hx-post="/submit" hx-target="#form-status" id="myform">
  <input name="email" required>
  <button type="submit" id="submit-btn">提交</button>
</form>

<div id="form-status"></div>

<script>
  const btn = document.getElementById("submit-btn");

  document.body.addEventListener("htmx:send", () => {
    btn.disabled = true;
  });

  document.body.addEventListener("htmx:afterOnLoad", () => {
    btn.disabled = false;
  });

  document.body.addEventListener("htmx:sendAbort", () => {
    btn.disabled = false;
    console.warn("请求取消，表单已解锁");
  });
</script>