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

我在理解如何让变量在我的.onmouseup事件中工作时遇到了一些问题。使用javascript访问变量（无jQuery）.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是可访问的，但我得到了得到了错误DIST是不确定的。

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

来源

2014-01-30 user3253694

你为什么要在一个事件处理程序中绑定一个事件*在一个事件处理程序*内？ –

他为什么不呢？ – Jake

在Chrome [Fiddle]中工作正常（http://fiddle.jshell.net/Pisi2012/VQKrN/） – alexP

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

对于浏览器兼容性，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)); 
    }; 
};

来源

2014-01-30 15:56:06

谢谢，这个工作很好！ – user3253694

如果这个工作，你可以标记为答案？ –

对不起。我试图upvote，但没有声誉。 – user3253694

确保您的函数定义不是被动地从闭包中继承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; 
    } 
}

来源

2014-01-30 15:58:01 MjrKusanagi

我改变了它这样的，它的工作：

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事件，但它仍然具有相同的结果有效。

来源

2014-01-30 16:00:20

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

回答

相关问题