事件穿透




现在,人们玩的都是套路,谁套谁又套住了谁,莫言谁是,莫怨谁非

不止是人,这个世界,何尝不可看成命运的连环套呢

昨晚正好在看《天才在左疯子在右》,刚好看到“三只小猪–前篇:不存在的哥哥”,刚在百度找到三只小猪的故事,就有个小美女和我说起了三只小猪的故事,当时我的第一反应是掐一下自己,我去,我不是在做梦吧?用另一种方式表达,称之巧合或者缘分亦不为过,在你最需要的时候,刚刚好就来了,一切都是那么自然而然,仿若已经演练了成百上千遍

这个世界,到底是什么样的?—-《天才在左疯子在右》

换个角度看这个世界,我是否可以把昨晚发生的一切,当成是世界,命运的一个套路?而且,是必须进入这个套路之中,大至世界尚且如此,在世界之下的前端技术,也是自有套路


事件穿透

事件穿透,事件冒泡,都是属于事件传递的一种方式,冒泡是按照一定的顺序传递,而穿透呢,不走寻常路,可上可下,具体要看页面内容分布

周五刚好有个同事说他写的跳转在微信运行总是一闪而过,抑制不住内心的好奇,就跑过去看看,说也奇怪,在Google浏览器里面正常跳转,跑到微信上就见鬼了,像个羞答答的新娘子,盖头一掀,还没看清就又盖上了,一来二去弄得心痒痒的

拿来代码,跑起来,一个列表页,点击进去详情,再点击按钮,进入一个新页面,很简单的逻辑,一开始以为是跳转代码的问题,但是看了列表页的跳转之后就排除了,研究了好一会还是百思不得其姐,好吧,孔子说,不耻下问,去问下有经验的人,说不定人家一句话就顶你一天瞎折腾了

和他描述了问题之后,给了代码之后他一开始也没找到问题,就在我心灰意冷,万念俱灰的时候,他突然很开心的说:“我知道了,事件穿透,哈哈哈哈”,马上搜索事件穿透的相关资料,发现是因为这个页面混用了touchclick,由于在移动端有300ms的延迟,所以发生了事件穿透,引起了这一奇异现象,将click换成tap之后,问题解决了

click与300ms延迟

移动浏览器提供一个特殊的功能:双击(double tap)放大

300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应单击(click),等待的这段时间大约是300ms,因此,点击穿透的现象就容易理解了,在这 300ms 以内,因为上层元素隐藏或消失了,由于 click 事件的滞后性,同样位置的 DOM 元素触发了 click 事件

自己的解决方案

在新页面中,将发生事件穿透位置的click,换成tap,在微信运行正常,

参考: