touchend “点透”了... 慎用touch

今天在做游戏接入的时候,点击一个按钮,会出现一个组件立刻浮在这个按钮上面,但是这个组件上的同一位置的按钮也被触发了。这和之前用zepto做web app的时候点透了的情况是一样的(他的最新版已经修复了)。那时候使用的是zepto封装的tap事件。他是将touchstart绑定在了body上。
原因:在我们使用touchstart或者是touchend的时候,被监听的元素会被触发,这个是很快的,于是浮层出现了,但是用户的手指的点触和离开过程会触发click事件,click事件是有延迟的,于是在浮层出现后,浮层上的同一位置的按钮原先绑定了click事件监听,click事件在这里产生,满足了click事件触发条件(根据click事件的规则,只有在被触发时,当前有click事件的元素显示,且在面朝用户的最前端时,才触发click事件 来源http://blog.youyo.name/archives/zepto-tap-click-through-research.html )所以点击事件的监听函数就被触发了。
要规避这个问题:
1,完全使用click(追求速度可以配合 fastclick)
2,完全使用touch(不过有时候这东西全用,我感觉不靠谱呢)
3,在touch事件发生到的元素A的上下方如果随即出现了B,那么不要给B绑定click事件。
4,给上面所说的A绑定click事件。

推荐阅读更多精彩内容