js 中 在 拖动时 阻止 click事件

阅读更多

最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片，然后在鼠标单击图片的时候可以放大图片。

 

这样就碰到一个问题，因为鼠标要实现拖放，鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。

 

要解决这个问题，网上搜到一个解决方法是 设置一个全局变量。 

 

因为拖放时 鼠标的 动作顺序是： a1 鼠标点击(mousedown)， a2 鼠标移动(mousemove)， a3 鼠标抬起(mouseup)

      放大时 鼠标的 动作顺序是： b1 鼠标点击(mousedown)，                                          b2 鼠标抬起(mouseup)

 

所以 在实现 单击放大的时候 不用click事件， 而是用mouseup。

 

设置一个isdrag的全局变量，在a1和b1的鼠标点击的时候设置为false，只有在a2鼠标移动的时候才把 isdrag 设置为true， 这样就只有放大的时候 mouseup的函数才会被调用。

 

 

//drag code

$img.mousedown(function(e){
         isdrag = false;
         $img.bind('mousemove.dragstart', function(e){				
				isdrag = true;
                           .......
                           .........
                           .........
                                 return false 
         })
         return false 
})

$(document).bind('mouseup', function(e){
	$img.unbind('mousemove.dragstart');	
})

// zoom code
$img.bind('mouseup', function(e){
        if(!isdrag){
               ..............
               ..............
               ..............
        }
})