事件 - htmx:trigger

每当有 AJAX 请求时，即使未指定 AJAX 请求，也会触发此事件。它主要用于允许 hx-trigger 执行客户端脚本，令到 AJAX 请求有更细粒度的事件可用，例如 htmx:beforeRequest 或htmx:afterRequest。

事件参数

• detail.elt - 触发请求的元素

示例：记录触发的事件类型

<button hx-get="/data" hx-target="#result">点击加载数据</button>
<div id="result"></div>

<script>
  document.body.addEventListener("htmx:trigger", function (event) {
    const original = event.detail.triggeringEvent;
    if (original) {
      console.log("HTMX 被触发，事件类型为：", original.type);
    } else {
      console.log("HTMX 被非标准方式触发（如调用 htmx.trigger）");
    }
  });
</script>

示例：阻止 HTMX 请求（条件阻止）

<button hx-post="/dangerous" hx-trigger="click" hx-target="#result">敏感操作</button>

<script>
  document.body.addEventListener("htmx:trigger", function (event) {
    if (event.detail.target.getAttribute("hx-post") === "/dangerous") {
      const ok = confirm("你确定要执行这个操作吗？");
      if (!ok) {
        event.preventDefault();  // 阻止后续请求
        console.warn("操作被用户取消");
      }
    }
  });
</script>

示例：和自定义事件配合使用（htmx.trigger(...)）

<button onclick="sendCustom()">发送自定义事件</button>

<div id="box" hx-get="/something" hx-trigger="myEvent">监听 myEvent</div>

<script>
  function sendCustom() {
    htmx.trigger("#box", "myEvent");
  }

  document.body.addEventListener("htmx:trigger", function (event) {
    console.log("触发器类型：", event.detail.triggeringEvent?.type || "非原生事件");
    console.log("触发目标元素：", event.detail.target);
  });
</script>