title: Sending mouse click events using socket.io
body: <p>I'm trying to emit a mouse click event from the client side to the server using socket.io and node.js. The problem is that after emitting, the dictionary I am sending is not being sent as a whole. Here's my code:</p>
  <p><strong>client side:</strong></p>
  <pre><code>document.addEventListener('click', function(event){
   console.log(&quot;event sent&quot;, event.target,event);
   var target = event.target;
   var myClick = {id: target, event: event};
   console.log(myClick);
   socket.emit('myClick', myClick);
  })
  
  socket.on('myClick', function(data){
    console.log(&quot;event received&quot;, data);
    document.querySelectorAll(data.id).dispatchEvent(data.event);
  });
  </code></pre>
  <p>The console logs this after a click event is registered on the body:</p>
  <pre><code>event sent &lt;body&gt;​…​&lt;/body&gt;​ 
  MouseEvent {isTrusted: true, screenX: 1145, screenY: 499, clientX: 1040, clientY: 398…}
  Object {id: body, event: MouseEvent}
  </code></pre>
  <p>Other pages log this after they receive the event:</p>
  <pre><code>event received Object {id: Object, event: Object}
  </code></pre>
  <p>However, expanding Object gives us this:</p>
  <pre><code>event: Object
    isTrusted: true
    __proto__: Object
  id: Object
    __proto__: Object
  __proto__: Object
  </code></pre>
  <p>So it is not receiving the whole event and id does not have the event target.</p>
  <p><strong>Server side:</strong></p>
  <pre><code>io.sockets.on('connection', function (socket) {
    console.log(&quot;socket connected&quot;);
    console.log(socket);
    socket.on('myClick', function (data) {
  
      console.log(&quot;myClick in server.js&quot;);
      console.log(socket);
      console.log(data);
      socket.broadcast.emit('myClick', data);
  });
  });
  </code></pre>
  <p>When the server recevies something on 'myClick' it print outs this:</p>
  <pre><code>myClick in server.js
  { id: {}, event: { isTrusted: true } }
  </code></pre>
  <p>As you can see, the target is empty, and what is supposed to be the full event object only has the <code>isTrusted</code> value. Has anyone faced this problem before? Any help would be appreciated. The way I was trying to do this is based on <a href="https://stackoverflow.com/questions/19499597/socket-io-mouse-click-event">this</a> Stack Overflow answer, but they were using jQuery and I am just using Javascript.</p>