最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片,然后在鼠标单击图片的时候可以放大图片。
这样就碰到一个问题,因为鼠标要实现拖放,鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。
要解决这个问题,网上搜到一个解决方法是 设置一个全局变量。
因为拖放时 鼠标的 动作顺序是: 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){ .............. .............. .............. } })