Question

我一直在尝试使用Domina library在cljs中为以下内容编写等效内容：

HTML：

<form id="my-form">
    <input type="text />
    <input type="submit" />
</form>

Javascript（jQuery）：

$("#my-form").submit(function() {
    console.log("submit suppressed");
    return false;
});

一个不令我满意的解决方案（没有非常详细的Domina库）：

(set! (.-onsubmit (.getElementById js/document "my-form")) #(do
                                                              (.log js/console "submit suppressed")
                                                              false))

我尝试了许多失败的解决方案 - 都有点类似于：

(listen! (by-id "my-form") :submit #(do
                                      (log "submit suppressed")
                                      false))

我故意不使用click事件，因为我还希望在通过代码或键盘提交表单时执行该函数。

Answer 1

当您从false事件处理程序中返回jQuery时，该库会自动调用e.preventDefault和e.stopPropagation（有关详细信息，请参阅here）。调用此函数是控制event的行为的正确方法。

Domina将js/Event包裹在ClojureScript理解的内容中。因此，您可以直接调用preventDefault和stopPropagation，而无需使用Javascript互操作。你可以在这里阅读更多关于这个巧妙的技巧：https://github.com/levand/domina#event-objects。

这个技巧可能是导致返回false根本不起作用的原因。实现这个技巧的方式（看一下代码here）是通过使用另一个始终返回true的函数包装你的函数。

所以你的代码应该更像这样：

(listen! (by-id "my-form") :submit
         (fn [e]
           (do
             (log "submit suppressed")
             (prevent-default e)
             (stop-propagation e))))

如何处理与Domina的提交

1 个答案: