浏览器对移动端手指touch优化产生的神奇的bug
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
不知道的情况下呢它也确实很神奇
什么意思呢大家看啊
这是一个（给）移动端开发的一个
展开的组件（demo）
现在的BUG就是点这个黑色的地方
它也能展开
大家看啊
哎
包括点这，点下边
他都会触发上面的事件
其实呢大家看 我刷新一下
刷新一下的时候
他默认没有数据的时候
我在点黑色的地方大家看
他也是触发了这个
客户来源这个
点击事件
点这呢
他是触发客户等级就很神奇
代码没有任何问题啊
那我在这准备了另一个demo
特别简单哈
就一个div
然后写一个onClick
大家看一下啊
就这样
然后呢里边有个console.log吗
打开我在这点没问题他可以打印event
但是呢我在外边点击大家注意
大家看 也会触发这个on click
再往下一点就不行了
只要靠近一点哈 大家看
明显没有碰到这个div对吧
但是他就是能触发事件
所以呢到这我们大概能猜出来
可能是这个chromium内核导致的
他可能会对这个点击事件做一些优化
我们再进一步验证一下哈
我们在这加一个“指示器”我写了一个div
然后呢把它写成这个绝对定位
然后是一个红色背景
然后呢再点击事件里边
我们呀让他的位置
等于我这个点击的这个位置
然后呢我们再来看一下
大家看 我点哪
他这个红色的左上角就是我这个圆心
这里发现了另一个录屏软件的bug
明明操作的时候是在圆心位置
录好的素材就变了
这段是我用手机摄像头补录的
然后呢往下放大家看啊
哎已经到边缘了对吧
然后再往下多一点
明显超出了这个边缘
大家看啊
哎他就上去了
大家看包括我在外边点
他总是认为我点击的是这个框框
里边的
咱们再进一步验证一下
我们在这啊放一个input
大家看我在外边点击他也能获取焦点
把它删掉啊
现在没有焦点了对吧然后在这点
大家看还是能获取焦点
但是呢我们关掉这个手机模式打卡
哎就没有任何问题了
我必须得点到里边才行
在这个周围点
他也不会获取焦点
只有在这个手机模式下放大一点
在这个模式下用手指头戳
他可能会认为你手指头比较粗
所以他会对你的点击事件做一些优化
那后来我就上网搜嘛
看有没有办法可以通过一些比如说
这个麦塔标记
关掉这个功能之类的
找了半天也没找到
那后来呢
我就想如果我点击的这个位置
他还有一个其他的点击事件
这chromium内盒会不会给我们优化呢
我们来试一下啊
所以呢我在这
再写一个一模一样的抬头
就叫抬头2哈太斯坦
然后呢我们把它换了个颜色大家看
现在有两个我在这点
然后呢往下打开到边缘了我再往下
哎没问题了
他就会到另一个点击事件里了
所以呢由此可见
他这个内核里面会有一些逻辑判断
也就是说你点击这个位置
本身就有click事件的话呢
他就不会去周围
再去寻找其他的click事件了
所以回到这个例子
如果我们要解决这个黑色区域的误
点击的问题
我们就要把这个黑色区域
加一个点击事件
那这个黑色区域是什么呢
他现在是用margin实现的
我们没办法给margin来加点击事件
所以啊我们只能把中间这个缝
换一个实现方案
不用margin来实现了
我先把这个margin（margin-bottom）注掉
先看一下大概没有margin了
然后呢我们把它换成真实的div
就是这个content
我们呢先把这个for循环
拿走拿到外头
因为我们需要
每一个循环里有2个DIY了
所以呢我们用template类的来实现
把这个整个就放到template里边
同时呢我们在下边再来一个div
比我们就叫content
margin
然后呢
把它加一个高度
就可以了
第二Ctrl的Mojit
比如我们40PX
好先看一下效果
现在肯定还不行因为他没有点击事件
我们再给他加一个点击事件
很click写个空的点击事件就行了
好我们来试一下啊
先拿到数据
然后点这个正常的区域没问题
点黑色的大家看他就不会展开了
没问题了