CODEWITHSUNDEEP
javascripttouchmouseevent
Peter Moskovits
Peter Moskovits

Reputation: 4376

Serializing/mirroring JavaScript mouse/touch events

I'd like to mirror JavaScript mouse/touch events between two browsers by ideally serializing and sending them over from browser A to browser B. It seems the mouse event object contains circular references and is therefore not serializable.

Ultimately what I want to achieve is to raise the same events in a remote browser that are firing in the local one.

Given that the event references local DOM objects, it may well be that using the mouse or touch events is not the way to go. Any hints/ideas appreciated.

Upvotes: 2

Views: 1453

Answers (2)

Geuis
Geuis

Reputation: 42277

Likely what you're going to need to do is to decide on a subset of the properties, variables, etc that you want to transfer. Store them in an object literal that can be serialized. Since you would be building the object yourself, you can control for circular references.

For your events, you're going to need to setup event listeners for anything you need to capture.

I might suggest looking into something like Backbone.js. It provides some interesting features like key/value observing which might be helpful for you.

Additionally, this sounds like an app that node.js would be very good for. Since it also supports Backbone, you could conceivably create a client and server js environment that mirror each other in terms of events, variables, etc. When the user on the iPad does something that updates the client model, those changes can be serialized and sent to the node server. It would then update its internal representation of the client model and push those changes out to the other clients using something like socket.io.

Upvotes: 2

nrabinowitz
nrabinowitz

Reputation: 55678

It seems to me you have two separate problems here:

  1. How to capture and serialize mouse events. This is pretty straightforward.
  2. How to re-create those mouse events in another context. This is tricky.

Even without using a library like jQuery, capturing mouse events is fairly simple (especially if, as you imply, you can be sure of the browser the client will be using). All you need to do is listen for the event, grab the information you need, and send it through your transport layer, e.g.

document.body.addEventListener('click', function(e) {
    sendToOtherBrowser({ type: 'click', pageX: e.pageX, pageY: e.pageY });
}, false);

I don't know that you'd need much more than event type and location for most events. The harder part is taking this event data and re-creating it elsewhere. To do that, as I think you note, you'd need to:

  1. capture e.target as well
  2. come up with a serializable unique id for the DOM element
  3. send the id with your event data
  4. use the unique id to get a reference to the DOM element in your other browser
  5. use something like myUniqueElement.dispatchEvent to recreate the event

I'd say (2) and (4) are the tricky parts here - you might take a look at these related questions for ideas. For (5), you can take a look at the event simulation examples here.

All that said, I have no idea how that might work for touch events - it may not be as easy as it is for mouse events (already not that easy).

Upvotes: 1

Related Questions