js 中 在 拖动时 阻止 click事件
程序员文章站
2024-01-07 23:08:04
...
最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片,然后在鼠标单击图片的时候可以放大图片。
这样就碰到一个问题,因为鼠标要实现拖放,鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。
要解决这个问题,网上搜到一个解决方法是 设置一个全局变量。
因为拖放时 鼠标的 动作顺序是: 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){ .............. .............. .............. } })
推荐阅读
-
js 中 在 拖动时 阻止 click事件
-
js 中 在 拖动时 阻止 click事件
-
在点击div中的p时,如何阻止事件冒泡
-
在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
-
在点击div中的p时,如何阻止事件冒泡
-
html5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave
-
html5中在可拖动元素或选取的文本放置在目标区域时触发的事件ondrop
-
html5中在可拖动元素或选取的文本正在拖动到放置目标时触发的事件ondragover
-
H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
-
H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter