從一個元素複製JS事件到另一個

我試圖從一個元素複製事件到另一個使用純JS（即不是JQuery）。從一個元素複製JS事件到另一個

我打的錯誤是當有多個事件時，最後一個事件用於兩個。

有點難以解釋，請參考我的jsbin example，我想將#foo中的mousedown和mouseup事件複製到#bar。錯誤是，在#bar元素上mouseup和mousedown都會觸發mouseup事件。

以下是我目前正在使用的代碼段來複制事件。

copyEvents(fromEl, toEl, ['onmousedown', 'onmouseup']); 

function copyEvents(fromEl, toEl, events){ 
    for (var i = 0; i < events.length; i++){ 
    var event = events[i]; 
    var func = fromEl[events[i]]; 
    if(func){ 
     if (console){ console.log('Copying event - ' + event + ' = ' + func); } 
     toEl[event] = function(evt){ func.call(this); }; 
    } 
    } 
}

來源

2014-02-24 Nick Grealy

分配功能直接'TOEL [事件] = func'。 http://jsbin.com/wowap/1/edit – elclanrs

上您的示例JSHint警告應該給你剛剛發生一個小竅門：

不要循環

你的問題的根源是the JavaScript infamous loop issue內作出功能。

如果循環使用forEach你避免這個問題完全是你介紹一個新的範圍：

function copyEvents(fromEl, toEl, events){ 
    events.forEach(function(ev, i) { 
    var func = fromEl[ev]; 
    if(func){ 
     toEl[ev] = function(evt){ func.call(this); }; 
    } 
    }); 
}

但你並不需要一個匿名函數。你可以保持您當前的代碼，如果你簡單地直接分配的功能：

toEl[event] = func;

，將工作，因爲this是動態的，當函數被調用解決。

演示：http://jsbin.com/wowap/1/edit

來源

2014-02-24 09:14:55 elclanrs

非常好，謝謝！我無法相信我走過去了'toEl [event] = func;'。 –

當複製在（多個）功能也得到其中複製的功能到相同this對象當你從複製元素的元素。所以它觸發他們兩個。

您需要單獨分配它們而不是複製功能。

來源

2014-02-24 08:54:23 diceler

從一個元素複製JS事件到另一個

回答

相關問題