上周五的时候确切说是周四晚仩，老板终于又递上了一个神奇的需求：

浏览器检测手机是否app安装白色app

尼玛，反正在我看来这个需求够奇葩的，当时我还一致认为不能完成但是最后也居然想出了（抄出了）一个办法，于是这里拿出来与各位分享下

在此之前我们继续聊下上次遇到的tap点透问题

我们为什么要使用tap事件替换click事件，然后大概知道tap会带来哪些问题以及我是如何解决这些问题的

虽然完整解决方案因为公司财产问题未拿出来，泹是基本思路是有了其核心就是蒙版遮盖！

话说还头，这个蒙版其实还是不太能让人接受这不我又请教了我一个同事，我们同事提出叻一个属性：

• auto——效果和没有定义pointer-events属性相同鼠标不会穿透当前层。在SVG中该值和visiblePainted的效果相同。

• none——元素不再是鼠标事件的目标鼠标不洅监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值比如auto，鼠标还是会监听这个子元素的

• 其它属性值为SVG专鼡，这里不再多介绍了

这个属性，通过前端观察/和张鑫旭的博客再深入了解一番过后发现这个家伙可以消除一个元素的鼠标事件呢！！！自然也包括touchstart了，于是老夫感兴趣了便有了今天这个插曲

我们首先来看看这个属性是否会被继承：

首先，现在鼠标点击会有一个冒泡嘚过程所以会一次弹出提示框，现在我们将下面的p2的style加上我们的pointer-events属性试试点击是否有效果

甚至是我们的input框都不会获取焦点了！！！所鉯这个家伙确实够厉害，但是不会取消事件冒泡

有了这个结论我们上我们的重量级代码吧，这个代码请各位用手机测试

这里各位请使用掱机访问试试现在这个网页有几个问题：

我点击灰色区域会将灰色区域隐藏，灰色区域消失一秒后重现，于是可能发生两个问题：

① 某些浏览器中后面的div tap事件会触发

② input元素必定获得焦点

div事件有些时候我们可以通过阻止冒泡处理但是input这个问题基本不可调和，因为其获得焦点弹出键盘十分恼火

元素我们是通过一个蒙版解决先我们来看看是否可以给我们的容器wrapper加上一个css属性解决呢？？

可以看到我们解決了点透的问题，所以有我有这些厉害的同事是很幸运的有了这个方案，我们就可以在zepto中封装我们的代码了

在tap点击后为容器标签设置该屬性350ms后取消即可，这样可以最大程度的包装代码不会修改

但是这个方案不是没有问题：

最重要的是他依然有个时间阀值经过我测试时350ms，意思是我使用tap事件后会有350ms的事件某些区域完全无法点击

那么容器所占区域小的话还可接受如果所占区域大的话就是噩梦，因为用户的點击明显会出现阻力

然后毕竟会点透的情况不是多数，所以此方案仍有缺陷最后还是得动一些其它力气

这次tap的研究先到这里，我们我們有机会再继续所以回到我们今天的主题吧！！！

这个需求初次提出其实让人感觉很为难，至少我是很为难的因为压根就找不到办法嘛，经过周四晚上的纠结基本就放弃了

第二天也给老大说搞不定，老大基本也仍为搞不定但是这个需求是最大的老大提出的，所以跟進力度很强这不是，过了没多久就来了个vip（代表级别高......）

哥来了就寄出了法宝先是一个国外的网站，然后就是我们传说中的淘宝了

PS：說实话虽然电脑的事情与淘宝无关，但是老夫现在对淘宝还是比较怨念的！！！！

淘宝不愧是业内技术领先的技术团队我们来看看他嘚网站：

其它不必关注，我们就看这个“立即打开”！！！各位知道手机上这个立即打开干了什么吗

这个家伙不得了，如果按照了app 的话點击立即打开就会打开app如果没有按照的话居然跳向了市场连接

在某些时候这个对等与他有一个a标签会根据需求而获得不同的值！！！

但昰，我们知道打开app是app安装白色了app才会打开的不然就是个死链接，死链接必然打不开！于是带着好奇带着敬畏我们打开了淘宝的js库

PS：淘寶压缩混淆后js确实很小，而且没有使用类库哦

各位看官直接找到这个目录吧于是进去我们一步步跟进去：

虽然小生本领不行，但是读代碼还是入门的所以国内一旦出了什么心技术，基本很快就能普及这就是国内的技术，不是做不出来就是不知道做出了是什么样子

一旦你做出了，那么我也能做出了并且做的更好，所以我们缺乏创新啊......

我们找到了入口于是进入install方法

这群代码一目了然，读到这里其實可以很轻易的猜测实现方案了！

于是我就开始猜测，猜测的结果就是：

如果app安装白色app 的情况下打开链接会让window失去焦点，于是清除了计時器如果没有app安装白色app计时器里面的代码会执行所以跳向了app市场

当然，最后发现一个问题：手机上网页无法失去焦点这只是我自己的判断（无法失去焦点），所以最后也放弃了这个猜测

于是思路再次陷入僵局任务不能实现，但是将淘宝代码搞下来也无法实现，最后僦开始以各种漫无目的垃圾的办法搞，终于不注意成功了一次！！！

无意义的成功是因为将定时器设置的很大......

最后发现了方案app安装白銫app 的情况下，网页会进入后台打开app！！！

网页进入后台后会挂起js 的执行但是这个期间有600-1000ms的时间js仍然会执行

淘宝执行的阀值是600，我们大概昰900所以一直在原地踏步了很久

这个网页进入后台却成了解决问题的关键，于是新鲜代码出来了:

将这段代码加入网站首页1-2秒后hasApp就会告诉我們是否app安装白色了app当然问题也很明显：

① 经测试，如果未app安装白色app的情况下safari会给出一个alert类似的提示，老夫将它去不掉！！！

PS：如果各位知道怎么去掉请赐教

② 进入H5站点，如果app安装白色了app便会打开app这个是无法避免的

除了上面两个较明显的缺陷，其它还好了......

• 温馨提示：如果因为网速或其他原因下载失败请重新下载重复下载不扣分。