HTMX：禁用子节点上的点击事件

Question

我有以下 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 路径，returns 什么都没有 (/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>

Answer 1

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

所以这里的解决方案是从外部 div 中删除 hx-trigger。事实上，如果你想做的是关闭一个模式，你可以在 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>

现在，当您单击 child div 事件时，该事件会冒泡并且不会被同级 close 按钮捕获。

Answer 2

这可以使用事件修饰符 "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>

HTMX：禁用子节点上的点击事件

HTMX: disable click event on child nodes

htmx