如果响应与innerHTML匹配，则防止htmx交换innerHTML

Question

我有一个消息框元素，它使用 HTMX 来频繁更新其内容。 如果响应没有任何新内容，我想阻止 HTMX 交换框的innerHTML。 那可能吗？ 谢谢你

我正在考虑将响应与盒子的innerHTML进行比较，但我不知道如何用Javascript控制交换。

Answer 1

您可以在消息框上收听

beforeSwap

事件。这样，您就可以通过

event.detail.xhr.response

访问服务器的响应，并可以通过

event.detail.shouldSwap

控制交换。使用 Vanilla JS，它看起来像这样：

document.getElementById("message-box").addEventListener("htmx:beforeSwap", (event)=>{
    let response = event.detail.xhr.response
    let currentValue = event.detail.target.value
    if (response === currentValue) {
        event.detail.shouldSwap = false
}
})