Question

我在理解如何让变量在我的.onmouseup事件中工作时遇到一些麻烦。

我有一个.onmousemove事件，它定义了一个局部变量，例如自.onmousedown以来鼠标移动的距离。我想在执行.onmouseup的函数中使用该信息，但是，我无法在那里得到它。以下是相关的代码：

document.onmousedown = function(){
   var mouseStart = [event.pageX,event.pageY];
   document.onmousemove = function(){
       var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2));
       document.onmouseup = function() {
          global_function(dist);
          document.onmousemove = null;
      }
   }
}

我不明白为什么mouseStart可以访问，但我得到的错误是未定义的。

我还有其他需要传递的变量，在.onmouseup期间无法重新定义。

Answer 1

我认为你需要在onmousedown处理程序中添加onmouseup事件处理程序。 mousemove事件在某些浏览器中每秒触发50次，因此您反复添加和删除鼠标向上/向下事件。然后你要在mousedown处理程序中声明dist。

对于浏览器兼容性，许多浏览器会在事件处理程序中传递event对象，而在其他浏览器中，它是一个全局变量。一个简单的event = window.event || event加上向处理程序声明一个event参数就可以了。

document.onmousedown = function(event) {
    event = window.event || event;
    var mouseStart = [event.pageX,event.pageY];
    var dist;

    document.onmouseup = function() {
        global_function(dist);
        document.onmousemove = null;
    };

    document.onmousemove = function(ev) {
        ev = window.event || ev;
        dist = Math.sqrt(Math.pow(ev.pageY-mouseStart[1],2)+Math.pow(ev.pageX-mouseStart[0],2));
    };
};

Answer 2

确保您的函数定义不是从其闭包中被动继承event变量。您应明确接受函数定义中的event变量，即function(event){}，而不是function(){}。

另外，你通过在mousemove事件中计算dist来进行过多的计算，直到mouseup才会计算它。

以下适用于Firefox。

document.onmousedown = function(event){
    var mouseStart = [event.pageX,event.pageY];
    document.onmouseup = function(event) {
        var dist = Math.sqrt(Math.pow(event.pageY-mouseStart[1],2)+Math.pow(event.pageX-mouseStart[0],2));
        console.log(dist); //global_function(dist);
        document.onmouseup = null;
    }
}

Answer 3

我改变了它并且它有效：

document.onmousedown = function (evt) {
    var e = evt || window.event;
    var mouseStart = [e.pageX, e.pageY];
    document.onmouseup = function (ev) {
        var evnt = ev || window.event;
        var dist = Math.sqrt(Math.pow(evnt.pageY - mouseStart[1], 2) + Math.pow(evnt.pageX - mouseStart[0], 2));
        alert(dist);
        document.onmouseup = null;
    };
};

如您所见，我删除了onmousemove事件，但它仍然可以使用相同的结果。

使用javascript（无jQuery）.onmouseup事件访问变量

3 个答案: