Question

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

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

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

有比这更优雅的方法吗？

编辑：我想我需要添加额外的一点......我的目标已经应用了draggable()。我正在努力制作一个体面的图像浏览器。我有一个包含可拖动div的视口img。我正在努力使图像可缩放，例如shift + mid-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"); }
});

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

2 个答案: