Javascript，传递鼠标事件

Question

I would like a cross modern browser way to take a mouse event from one html element and pass it on to another.

eg.

el1.addEventListener('mousemove', function(e) {
  el2.trigger('mousemove', e);
});

el2.addEventListener('mousemove', function(e) {
   //THIS SHOULD BE CALLED WHEN EITHER el1
});

a jquery solution is ok but I would prefer a non-jquery solution. Is this simple?

Answer 1

Here is the correct code

var el1 = document.getElementById('el1');
var el2 = document.getElementById('el2');

el1.onmousemove = function(e) {
    alert('el1 event');
    el2.onmousemove(e);
};
el2.onmousemove = function(e) {    
    alert('el2 event');
};

demo

This is good if you want the event argument e to pass over to el2 's event. This updated demo shows mouse position being passed over.

Answer 2

If you accept a jQuery answer then here's the code:

// el1 and el2 are the jQuery objects of the DOM elements
el1.mousemove(function (event) {
    el2.mousemove(event);
});

In pure javascript:

el1.onmousemove = function(e) {
    el2.onmousemove('mousemove', e);
};

el2.onmousemove = function(e) {

};

Answer 3

el1.addEventListener('mousemove', handler, false);
el2.addEventListener('mousemove', handler2, false);
function handler(e) {
    // do some stuff
    handler2.call(el2, e); // pass el2 as this reference, event as the argument.
};

not too sure if this is what you are looking for, just name the event handlers and trigger the one off the other.

if you do not need the this reference in the second handler, use handler2(e); instead.

further readings:
Function.prototype.call

Here is a half-baked demo passing the mouse event args. I'm unsure how well supported layerX/Y is, I just used it to show the demo.

Answer 4

native should work like that

var evt;
el1.onmousemove = function() {
  evt = document.createEvent('MouseEvent');
  evt.initEvent('mousemove', true, true);
  el2.dispatchEvent(evt);
}

You can read up on element.dispatchEvent here:
https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent