How to transfer html dom event through clojurescript channel

Question

I am working on integrating the event system with om-event-bus, it use async/chan to transfer the events. However, it turns out html DOM event failed to be transfer through clojurescript's async channel. The properties in the transferred event becomes null and the internal functions are missing.

Define a channel first:

(def event-bus (chan))

Setup a dom node and attach a callback function to the keydown event. In the function, add the put the dom event in the channel (PS:I use om as UI)

(dom/section #js {:id "VRE" 
                  :tabIndex 0
                  :onKeyDown  #(put! event-bus %)))

wait to receive the event transferred

(go-loop
  []
  (let [e (<! event-bus)]
    (when e
      (println "go-loop received" (.stringify js/JSON e))
      (recur))))

When I type some key, the console will print:

go-loop received {"dispatchConfig":null,
                  "dispatchMarker":null,
                  "nativeEvent":null,
                  "type":null,
                  ...
                  "_dispatchListeners":null,"_dispatchIDs":null}

All the properties are null and the internal functions like preventDefault are missing.

I guess there must be something I haven't understood. Does anyone have some ideas for fixing it? It would be great if you could give some hints/tips or other thoughts on the problem

score 0 · Accepted Answer · edited May 23 '17 at 12:08

0

You are trying to stringify an Event Object. This is not a good idea, look at this answer:

How to stringify event object?

Try extracting the interesting information (i.e which key was pressed) and passing that as a value to the channel.

To pass the whole Event Object and manipulating it on the receiving end might not be possible. I'm speculating but it seems like the Event Object is deleted before it is extracted from the channel.

edited May 23 '17 at 12:08

Community

1
1

answered Jan 13 '15 at 14:17

sbensu

1,491
10
9

Yes, pass the interesting part is one solution, but what I want is function preventDefault, need to call it after transer. Stringify it is just for debug. Any idea? – xfsnowind Jan 13 '15 at 15:08
I tried for half an hour to manipulate the event on the receiving end of the channel. Got nowhere. My speculation: the event object is deleted before it is received. I can pass all sorts of things, but if they contain a reference to the event object (such as this) they don't work. – sbensu Jan 13 '15 at 16:21
I can upload my failed repo to github if you think it will be helpful. – sbensu Jan 13 '15 at 16:21
Run it the way you would run a chestnut template (it is explained in the README) https://github.com/bensu/on-key-down – sbensu Jan 13 '15 at 16:53
What I need is just to call preventDefault() in the received function, for this situation, do you have some idea to achieve it without passing whole event in the channel? – xfsnowind Jan 14 '15 at 11:21
I updated my answer, I think it might not be possible. – sbensu Jan 14 '15 at 14:37
Yes, I agree with you. It seems like that The context of event cannot be passed through channel, I need to think of another way to solve this. Thanks for your working – xfsnowind Jan 15 '15 at 13:21
@sbunsu I fount this function [this-as](https://github.com/clojure/clojurescript/blob/master/src/clj/cljs/core.clj#L643), I guess it can keep the context for dom event, will look into it! – xfsnowind Jan 21 '15 at 13:03
Great! I'll look into it as well – sbensu Jan 21 '15 at 13:55

How to transfer html dom event through clojurescript channel

1 Answers1