Question

我想用一种跨现代的浏览器方式从一个html元素中获取鼠标事件并将其传递给另一个。

例如

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

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

一个jquery解决方案是可以的，但我更喜欢非jquery解决方案。这很简单吗？

Answer 1

这是正确的代码

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

如果您希望事件参数e转移到el2的事件，这很好。此更新的demo显示了传递的鼠标位置。

Answer 2

如果您接受jQuery答案，那么这里是代码：

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

纯粹的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.
};

不太确定这是否是您正在寻找的，只需命名事件处理程序并触发另一个。

如果您不需要第二个处理程序中的this引用，请改用handler2(e);。

进一步阅读：
Function.prototype.call

Here is a half-baked demo传递鼠标事件args。我不确定支持的layerX / Y有多好，我只是用它来展示演示。

Answer 4

原生应该像那样工作

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

您可以在此处阅读element.dispatchEvent：
https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent

Javascript，传递鼠标事件

4 个答案: