0

我在理解如何让变量在我的.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.

4

3 回答 3

0

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

为了浏览器兼容性，该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));
    };
};
于 2014-01-30T15:56:06.697 回答
0

确保您的函数定义不会被动地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-30T15:58:01.437 回答
0

我像这样更改它并且它起作用了：

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-30T16:00:20.327 回答