如何使用通道访问 ClojureScript 中按键事件的属性？

Question

使用 ClojureScript，当有人在文本字段中按下 enter 时，我试图采取行动，而忽略其他键。所以我需要能够区分不同的按键。

作为参考，我的ns 在我的.cljs 是：

(ns calculator.calculator
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [goog.dom :as dom]
            [goog.events :as events]
            [cljs.core.async :refer [put! chan <!]]
            [clojure.string :as string]))

我的 html 有一个输入元素 <input id="data-entry-box"></input>。我这样设置监听器：

(defn listen [el type]
  (let [out (chan)]
    (events/listen el type
                   (fn [e] (put! out e)))
    out))

(let [keypresses (listen (dom/getElement "data-entry-box") "keypress")]
  (go (while true
        (let [key-event (<! keypresses)
              char-code (.-charCode key-event)]
          (.log js/console (str "The character code is " char-code))
          (.log js/console (str "The key is " (.-key key-event)))
          (.log js/console (str "The event is " (.-event key-event)))
          (.log js/console (str "Or the event is " (:event key-event)))
          (if (= char-code
                 13)
            (handle-submit))))))

编译、加载页面并在输入元素中按回车后，我在控制台中得到以下信息：

"The character code is 13"
"The key is "
"The event is "
"Or the event is "

这很好；我可以通过查找 ASCII 值来检查密钥是什么——但我不应该这样做。我想直接访问按下的字符。

如果我放置一个断点，我可以看到有一个.event 属性，并且该属性还有一个属性.key。但由于某种原因，我无法访问它。

Answer 1

看看捕鼠器代码 - https://github.com/ccampbell/mousetrap/blob/master/mousetrap.js

通常使用键码或手动将其映射到“Enter”。

另外我还有一个很大的疑问 event_ 是通用属性，可以参考https://developer.mozilla.org/en-US/docs/Web/Events/keypress

Answer 2

按键上的属性实际上并不叫.event；它被称为.event_。注意结尾的下划线。所以我们用(.-event_ key-event)访问它，如下：

(let [keypresses (listen (dom/getElement "data-entry-box") "keypress")]
  (go (while true
        (let [key-event (<! keypresses)
              key-pressed (.-key (.-event_ key-event))]
          (.log js/console (str "The key pressed was " key-pressed))
          (if (= key-pressed
                 "Enter")
            (handle-submit))))))

此代码打印：“按下的键是 Enter”。

请注意，javascript 没有字符文字，所以(.-key (.-event_ key-event)) 返回的是字符串"Enter"。