捕获鼠标拖动事件JS时发生的奇怪事情答案

【问题标题】：odd things happening when capturing mouse drag event JS捕获鼠标拖动事件JS时发生的奇怪事情
【发布时间】：2013-01-11 00:39:32
【问题描述】：

为了捕获鼠标拖动事件，我尝试在鼠标按下处理程序中放置鼠标向上处理程序，因此鼠标按下后必须能够检测到鼠标向上，我计划最终将 onmousemove 移动到函数中，但我可以没有这么多工作。

发生的事情是它会记录越来越多的数字（至少看起来是这样），而不是我试图让它记录的四个。

    var clickx;         
    var clicky;         
    var releasex;
    var releasey;
    $('#tdw-layout-editable').bind("mousedown", function(e){
      clickx=e.clientX;
      clicky=e.clientY;
      console.log(clickx + " " + clicky);
      $('#tdw-layout-editable').bind("mouseup", function(f){
         releasex = e.clientX;
         releasey = e.clientY;
         console.log(releasex + " " + releasey);
     });
    });

真的很奇怪：\ 谢谢

【问题讨论】：

您是否尝试过将mouseup 绑定放在mousedown 绑定之外？
拖动是可能发生的许多事情之一，如果我这样做，我认为没有办法明确告诉用户正在拖动？或者..等等..嗯............嗯......你可能是对的。
你可以通过.mousedown()和.mouseup()判断用户是否在拖拽。如果mousedown 被执行而mouseup 没有被执行并且clientX 和clientY 的值发生变化，那么用户可能正在拖动。
啊，我在这两个中都使用了 e。愚蠢的愚蠢的我。谢谢！！
是的，e 在mouseup 中应该是f。但我认为mouseup 绑定应该在mousedown 绑定之外，不是吗？

标签： javascript jquery dom javascript-events event-handling

【解决方案1】：

改为这样做：

$(function(){
    var clickx;         
    var clicky;         
    var releasex;
    var releasey;
    $('#tdw-layout-editable').bind("mousedown", function(e){
        clickx=e.clientX;
        clicky=e.clientY;
        console.log(clickx + " " + clicky);
    }).bind("mouseup", function(f){
        releasex = f.clientX;
        releasey = f.clientY;
        console.log(releasex + " " + releasey);
    });  
 });

【讨论】：