Question

在这里的源代码中 http://www.daftlogic.com/sandbox-javascript-slider-control.htm

有这些说明：

// safely hook document/window events
if (document.onmousemove != f_sliderMouseMove) {
window.f_savedMouseMove = document.onmousemove;
document.onmousemove = f_sliderMouseMove;
}

我不明白它的作用以及为什么用这种方式做得更安全，有人理解吗？

Answer 1

可能是某些其他代码已经为document.onmousemove分配了一个事件处理程序。与addEventListener相反，此方法的问题是只能将一个函数分配给element.onXXXX。因此，如果您盲目地分配新的事件处理程序，则可能会覆盖现有的事件处理程序，而其他代码可能会中断。

在这种情况下，我会写：

if (document.onmousemove) {
    (function() {
         var old_handler = document.onmousemove;
         document.onmousemove = function() {
            old_handler.apply(this, arguments);
            f_sliderMouseMove.apply(this, arguments);
         };
    }());
}
else {
    document.onmousemove = f_sliderMouseMove;
}

这样可以确保执行两个事件处理程序。但我想这取决于代码的上下文。无论如何，f_sliderMouseMove可能会调用window.f_savedMouseMove。

Answer 2

它只是保存当前的钩子，可能是因为它可以在它自己的钩子方法结束时调用它。

它避免了对已经设置的其他一些代码钩子进行标记。

您可能希望钩子代码类似于：

f_sliderMouseMove = function(e) {
   // Do my thing

   // Do their thing
   window.f_savedMouseMove();
}

[强制jquery插件]使用jquery事件，你可以忽略这样的问题......

Answer 3

在设置新代码之前，此代码似乎存储了当前在鼠标移动时执行的功能。这样，它可能会在以后恢复，或者在必要时委托给它。这应该会增加与其他代码或框架的兼容性。

在javascript中安全地挂钩事件

3 个答案: