clojurescript - 如何使用 Domina 处理 onsubmit

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

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

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))))