使用JQuery跟踪鼠标点击期间的鼠标移动

Question

使用JQuery如何在mousedown到mouseup期间跟踪鼠标运动？跟踪应该从点击某个目标元素开始，并持续到mouseup，即使鼠标移出目标元素也是如此。

<div id="some_elt">
   <div id="target">
   </div>
</div>

我所能想到的唯一方法是将mousemove绑定到整个文档，根据我从$("target").mousedown设置的全局标志调用我的运动处理程序，并在$("target").mouseup中取消设置。是否有比这更优雅的方法？ 编辑：我想我需要添加一个额外的部分...我的目标已经应用了draggable()。我正在尝试制作一个不错的图像查看器。我有一个包含可拖动的img的视口

。我试图使用类似shift+middle-click的东西使图像可以缩放，而不会干扰用于导航的可拖动性。我将不得不依靠JQuery在幕后执行的内容来使可拖动工作吗？ 编辑2：回答我的编辑：当然不用！JQuery太棒了！

- ajwood

---

这是常见的方法... - Felix Kling

Answer 1

使用事件目标开始跟踪

$(document).mousedown(function(event){
   if( event.target.id=="target"){
     $(this).on('mousemove',function(event){
          /* do tracking*/
      })
   }
}).mouseup(function(){
    $(this).off('mousemove');
})

对于 jQuery 版本低于 1.7 的情况：

$(document).mousedown(function(event){
   if( event.target.id=="target"){
     $(this).mousemove(function(event){
          /* do tracking*/
      })
   }
}).mouseup(function(){
    $(this).unbind('mousemove');
})

- charlietfl

---

好的。可能使用 jQuery 版本小于1.7，是吗？我为较低版本的 jQuery 添加了另一种处理方式。 - charlietfl

啊，是的：1.5版本。我应该尝试升级。 - ajwood

耶！你的例子成功了，升级似乎没有出现任何明显的问题 :) - ajwood

Answer 2

我认为最优雅的方法之一是使用jQuery UI draggable：

$("#target").draggable({
    start: function(event, ui) { console.log("start dragging"); },
    drag: function(event, ui) { console.log("continue dragging"); },
    stop: function(event, ui) { console.log("stop dragging"); }
});

- Smileek