jquery - 使用 JQuery 在单击期间跟踪鼠标运动

Question

如何使用 JQuery 在 mousedown 到 mouseup 之后跟踪鼠标运动？跟踪应该在单击某个目标元素时开始并继续 mouseup，即使鼠标移出目标元素也是如此。

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

我能想到的唯一方法是绑定到整个文档并根据我从设置和取消设置mousemove的全局标志调用我的运动处理程序。$("target").mousedown$("target").mouseup

还有比这更优雅的方法吗？

编辑：我想我需要添加一点......我的目标已经draggable()应用到它。我正在尝试制作一个像样的图像查看器。我有一个div包含可拖动的视口img。我正在尝试通过 shift+m​​iddle-click 等方式使图像可缩放，而不会干扰可拖动的导航。我是否将不得不背负 JQuery 在引擎盖下所做的事情以使可拖动的工作？

Edit2：回答我的编辑：当然不是！jQuery 太棒了！

Answer 1

使用事件目标开始跟踪

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

对于低于 1.7 的 jQuery 版本

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

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"); }
});