移动端的穿透事件

项目需求:

 一个Adiv上有相对于body的绝对定位的Bdiv,没有嵌套关系,Bdiv层级比Adiv高,想要实现通过点击Bdiv点击到Adiv

 

一开始网上搜资料,什么移动端的touch.click,引用 fastclick库啊,使用Zepto的tap事件等等这些随便搜都能搜到的....

 

1.fastclick

使用fastclick,操作简单,可是有很多坑,需要阅读源码....而且不是我要的效果,不过确实提升移动端点击响应速度

2.在网上搜到别人写的一个demo

他的思想就是点击Cdiv让Cdiv隐藏起来,然后速雷不及掩耳的速度再次点击Ddiv,用户体验效果十分不好..肯定会被嫌弃..而且在网上搜索移动端的双击事件double-tap (双击) 有一个致命问题，

这个动作的存在是以牺牲 tap (单击) 的体验为代价,网上没有很好的解决方法..应该说是我不会..

3.pointer-events:none

pointer-events是CSS3中的属性，它有很多取值，有用的主要是auto和none，其他属性值为SVG服务。不过兼容性问题 ,需要做ie兼容的同学稳住

pointer-events:none元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。

pointer-events:auto鼠标还是会监听这个子元素的。效果和没有定义 pointer-events 属性相同，鼠标不会穿透当前层。

不需要做兼容的首选!

在不需要点击的Bdiv上加上这个pointer-events:none属性,搞定穿透事件!

 

总结:

做完之后就觉得自己想的太复杂了,网上太多一个抄一个的资料,有些demo是不完整的,有些demo..额

所以还是需要自己去多做demo实现,靠自己最可靠,网上搜资料只是为了少走弯路,感觉我还是走了好多弯路

以上是我自己的个人观点,不喜勿喷,有哪些地方说错了请多多指点大家一起进步,写下来就是当做个笔记,共勉!