Javascript，傳遞鼠標事件

我想要一種跨瀏覽器的現代方式從一個html元素中獲取鼠標事件並將其傳遞給另一個。Javascript，傳遞鼠標事件

例如。

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

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

一個jquery解決方案是好的，但我更喜歡非jQuery的解決方案。這很簡單嗎？

來源

2012-11-27 asutherland

你的事件監聽器代碼已經限制在現代瀏覽器中，只有 – Esailija

好點，只是試圖解釋這個問題。 – asutherland

下面是正確的代碼

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顯示傳遞的鼠標位置。

來源

2012-11-27 21:10:10

如果你接受一個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-27 20:59:03

'element.trigger（）'不是一個有效的方法。這是jQuery專有功能。它會在答案的第一部分更好地發揮作用，dispatchEvent是本地DOM api方法。 – rlemon

@rlemon好點，我複製粘貼我給的jQuery代碼，並忘記改變它。這是固定的感謝注意 –

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使鼠標事件參數。我不確定layerX/Y的支持程度如何，我只是用它來顯示演示。

來源

2012-11-27 21:02:48 rlemon

本地工作應該像那

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-27 21:04:09 hereandnow78

好，我喜歡這個。我沒有記得dispatchEvent;） – rlemon

你怎麼把鼠標座標變成事件？所以你可以通過它們。 – asutherland

@ user959986您可以在我的更新演示中看到。 –

Javascript，傳遞鼠標事件

回答

相關問題