Question

我正在尝试使用纯JS（即不是JQuery）将事件从一个元素复制到另一个元素。

我遇到的错误是，当有多个事件时，最后一个事件都用于这两个事件。

有点难以解释，请参阅我的jsbin example，我想将mousedown和mouseup事件从#foo复制到#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); };
    }
  }
}

Answer 1

复制函数时，您还将复制函数的元素赋予与复制元素相同的this对象。所以它会触发它们。

您需要单独分配它们，而不是复制功能。

Answer 2

关于你的例子的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

将JS事件从一个元素复制到另一个元素

2 个答案: