缘起
最近微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核
为了检查现在的服务号的页面是否适配新内核，小伙伴们找啊找，还真找到了一个页面的bug。
Paste_Image.png
这个问题呢，是这样的：
当前的页面需要进行浮框的内容提示，而在浮框的上一层，当然要有个半透明的div遮盖住原有的页面，使其原有页面不能点击。
这时问题就来了！！
当你用手指按着这个半透明的遮盖层，原有页面莫名其妙就会出现一条横线。
修bug中
一开始的思路感觉应该是样式的问题。（因为只有出现了这个半透明的遮盖层才会出现嘛）
原来是使用：
opacity:0.4;
来进行半透明处理的，那就修改使用半透明png作背景。
结果失败。。。
那应该不是遮盖层的样式问题了吧。。。
修bug2
然后发现这条线和底层页面有内容的dom结构高度是一致的，不论给底层的dom加高度，或者加padding、margin，都能将线移动。
这时就想是不是outline的问题
然后就将所有的div都加上
div:focus {outline: 0;}
结果还是失败。。。
解决
最后想到这个是由于按住遮盖层，然后冒泡到底层页面去了，那我就不让它冒泡就好了
$(".masking").touchstart(function(event){
event.stopPropagation();
});
这样还不行，因为event.stopPropagation() 只是阻止事件往上冒泡，不阻止事件本身。
那阻止事件往上冒泡，同时还阻止事件本身就好了嘛。
$(".masking").touchstart(function(event){
return false;
});
解决！！！皆大欢喜
————
前端·小h
纸上得来终觉浅，绝知此事要躬行
网友评论