事件 - htmx:beforeSwap

此事件在任何新内容交换到 DOM之前触发。如果取消此事件，则不会发生交换。

你可以通过修改事件详细信息的和属性来修改 shouldSwap 默认交换行为。有关更多详细信息，请参阅有关配置交换 target 的文档。

事件参数

• detail.elt - 发送请求的元素
• detail.xhr - XMLHttpRequest
• detail.requestConfig - AJAX请求的配置
• detail.shouldSwap - 是否交换内容（非 200 响应代码的默认值为 false ）
• detail.ignoreTitle - 如果为 true，响应中的任何标题标签是否将被忽略
• detail.target - 交换的目标

因为 htmx 在默认情况下遇到非 200 的响应码不会发生交换，但有时候想要把服务器响应的错误信息展示在目标元素中时，就可以通过响应该事件，修改 event.detail.shouldSwap 的值来把错误信息展示出来。

示例代码

<button type="button" hx-get="/test/error"
  hx-on:htmx:before-swap="event.detail.shouldSwap = true;"
  >搜索</button>

/test/error 会返回一个 500 的错误及错误信息：This is a test error response!，默认情况下页面不会展示任何内容，但以上代码拦截并响应了 beforeSwap 事件，并把 shouldSwap 的值设为了 true，所以点击以上代码中的按钮后，按钮的文本会变为 “This is a test error response!”。