0

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

例如。

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

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

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

4

4 回答 4

2

这是正确的代码

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');
};

演示

如果您希望将事件参数e传递给el2' 事件，这很好。这个更新的演示显示了鼠标位置被传递。

于 2012-11-27T21:10:10.627 回答
0

如果您接受 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) {

};
于 2012-11-27T20:59:03.467 回答
0 
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

这是一个传递鼠标事件参数的半生不熟的演示。我不确定 layerX/Y 的支持有多好，我只是用它来展示演示。

于 2012-11-27T21:02:48.763 回答
0

本机应该这样工作

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

于 2012-11-27T21:04:09.880 回答