赞
踩
获取AndroidOaid:SDK+DEMO,版本号:1.0.23
文件:n459.com/file/25127180-479069355
以下内容无关:
-------------------------------------------分割线---------------------------------------------
今天要说一个很隐晦的东西,一般可能很难碰到,碰到了可能很难解决。就是当我们自己用mousestart,mousemove,mouseup做自定义拖拽效果的时候,如果这个时候配上click就会引发一个拖拽穿透的bug。
mouseup模拟drag与click事件冲突(二维码)
点击上面的链接,用鼠标拖住上下拖拽可滚动列表,然后你会发现,如果你的鼠标在某一个具体的列表项上,就会触发查看详情,其实查看详情是click之后才会触发的,但是这里很明显自定义拖拽触发了click。(注:此bug pc上才有,手机端没有)
问题分析
其实这种问题一般情况下是很难遇到的,只会有某些框架里面出现这种bug,那我们看看这种问题到底是如何出现的。
首先自定义拖拽是利用mousestart,mousemove,mouseup三个事件组合形成的,但是mouseup执行之后,click是一定会执行的,是无法避免的,是无法用preventDefault,stopPropagation,stopImmediatePropagation阻止的。本例的demo中就在mouseup之后执行了上述阻止事件传播的方法,但是并没有效果。因为mouse事件和click事件本身就不是一个系列的,因此没有关系,所以当发生拖拽之后,mouseup一定会执行,click也会在mouseup执行后执行。
解决方案
首先我们可以解决最简单的一种,就是不拖拽的情况下触发只是触发click。
按照刚才的说法,mouseup事件后click必定会触发,但是如果没有发生拖拽,也就是没有触发mousemove事件,这种情况比较简单,我们可以用一个变量纪录是否触发mousemove,在mouseup的时候只触发发生拖拽的情况。
还有一种比较复杂的情况,就是在发生了拖拽的情况下如何避免click的触发?这个时候我们用一个定时去控制一个全局变量,让这个变量在200毫秒之后发生改变,因此mouseup之后click很快就触发了,不到200ms,因此可以保证变量还没有发生变化,click事件里面去检测这个变量,如果是变化之前,那么不执行。具体代码如下:
复制代码
1 //mouseup事件里定时改变一个变量
2 window.mouseup_click_debug = true;
3 setTimeout(function() {
4 window.mouseup_click_debug = false;
5 }, 200);
6 //click事件里去检测这个变量是否发生改变,如果没改变,说明mouseup刚执行完,这里不执行
7 if(window.mouseup_click_debug) {
8 return false;
9 }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。