Question

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.

Answer 1

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