-1

我有以下 div 并希望在单击 id="child" 时它不应该执行对“/modal/closed”的获取并且不替换 id="modal"。也就是说，不做任何与 HTMX 相关的事情。

<div id="modal" hx-trigger="click"
    hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
    <div id="child">
    </div>
</div>

现在我使用触发器“点击消费”让它工作，但需要指定一个 hx-get 到一个不返回任何内容的 HTTP 路径（/nop）。

有没有更清洁的方法来做到这一点？

<div id="modal" hx-trigger="click"
    hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
    <div hx-trigger="click consume" hx-swap="none" hx-get="/nop">
    </div>
</div>
4

2 回答 2

1

这可以使用 event 修饰符"target:#modal"来解决，表明我们只对源自id="modal".

这种方式点击id="child"该气泡id="modal"将被忽略。

<div id="modal" hx-trigger="click target:#modal"
    hx-swap="outerHTML" hx-get="/modal/closed" hx-params="none">
    <div id="child">
    </div>
</div>
于 2022-01-13T18:40:53.060 回答
0

由于 htmx https://htmx.org/docs/#inheritance中的属性继承，它以这种方式工作。将hx-trigger属性放在最外层的 div 上，意味着该元素将在其所有子元素中侦听该事件。当您使用修饰符将相同的属性添加到子 div 时，consume它会阻止事件冒泡。

所以这里的解决方案是hx-trigger从外部 div 中删除。事实上，如果您想要关闭一个模式，您可以在 div 的其他位置添加一个关闭按钮。像这样的东西：

<div id="modal">
    <button id="close" hx-trigger="click"
    hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">Close</button>

    <div id="child">
    </div>
</div>

现在，当您单击childdiv 时，事件会冒泡，并且不会被兄弟close按钮捕获。

于 2022-01-13T11:14:53.143 回答