必赢亚洲手机app下载


自个儿的阿爸是个杀人犯必赢亚洲手机app

晚睡自闭症366net必赢亚洲手机版

笔者们一道来商讨

前言

扯淡

以此月相比不好,小编送了女对象一台台式机电脑作为生日礼物,结果15天一过电脑就坏了,正剧的本身还把电脑盒子给扔了!天猫商城不给换更不给退

于是被女对象臭骂了一过星期后,今日当然在合营社有职分的,不过去修了个计算机(换主板啊……),一蹉跎就快五点了,以后左右干劲也特别,就写篇博客吧

需求

这礼拜五的时候,确切说是星期四夜晚,老板终于又递上了二个神奇的须求

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

尼玛,反正在笔者眼里,这一个须求够奇葩的,当时自我还同样觉得不能成功,不过最终也如故想出了(抄出了)多少个格局,于是那里拿出去与诸位分享下

以前,大家继续聊下上次碰到的tap点透问题

tap“点透”再探索

http://www.cnblogs.com/yexiaochai/p/3377900.html

http://www.cnblogs.com/yexiaochai/p/3391015.html

看过地点两篇博客的的恋人应该清楚我们为啥要利用tap事件替换click事件,然后大致知道tap会带来什么难点,以及自己是何等化解那么些标题标

固然总体解决方案因为卖家资金财产难题未拿出来,不过基本思路是有了,其主导正是蒙版遮盖!

话说还头,那么些蒙版其实照旧不太能令人接受,那不笔者又请教了自家2个同事,大家同事提议了一个属性:

pointer-events属性值详解

  • auto——效果和尚未概念pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效劳等同。
  • none——成分不再是鼠标事件的目的,鼠标不再监听当前层而去监听上边包车型大巴层中的成分。然而只要它的子成分设置了pointer-events为任何值,比如auto,鼠标照旧会监听这些子元素的。
  • 别的属性值为SVG专用,那里不再多介绍了。

以此特性,通过前端阅览/和张鑫旭的博客再深远摸底一番今后察觉,那几个东西能够撤消2个要素的鼠标事件吧!!!自然也包括touchstart了,于是老夫感兴趣了,便有了明天以此插曲

是不是持续

咱俩先是来看看那性格格是还是不是会被一连:

http://sandbox.runjs.cn/show/teegz43u

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         div { display: block; border: 1px solid black;  margin: 10px; padding: 10px; }
10     </style>
11     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
12     
13 </head>
14 <body>
15 
16     <div id="p1">
17         p1
18         <div id="p1-1">
19             p1-1
20             <div id="p1-1-1">
21                 p1-1-1
22             </div>
23              <div id="p1-1-2">
24                 p1-1-2
25             </div>
26         </div>
27     </div>
28 
29      <div id="p2">
30         p2
31         <div id="p2-1">
32             2-1
33             <div id="p2-1-1">
34                 p2-1-1
35             </div>
36              <div id="p2-1-2">
37                 p2-1-2
38             </div>
39         </div>
40     </div>
41 
42 </body>
43 <script type="text/javascript">
44     $('div').click(function () {
45         alert($(this).attr('id'))
46 
47     })
48 </script>
49 </html>

先是,今后鼠标点击会有四个冒泡的进度,所以会3回弹出提醒框,未来大家将下边包车型客车p2的style加上大家的pointer-events属性试试点击是还是不是有意义

结果申明,设置了pointer-events:
none; 后,该因素以及上面包车型客车因素的click事件全体没有了

居然是我们的input框都不会收获关节了!!!,所以这个人确实够厉害,可是不会收回事件冒泡

有了这几个结论,我们上大家的分量级代码吧,其一代码请各位用手提式有线电话机测试

质量化解点透

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
10         div { display: block; border: 1px solid black; height: 500px; width: 100%; }
11         #input { width: 80px; height: 200px; display: block; }
12     </style>
13     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
14 </head>
15 <body>
16     <div id="list" style="background: gray;">
17     </div>
18     <div id="wrapper">
19         <div id="d">
20             <input type="text" id="input" />
21         </div>
22     </div>
23 </body>
24 <script type="text/javascript">
25     var list = $('#list');
26     var d = $('#d');
27     var input = $('#input');
28     input.tap(function (e) {
29         input.val(new Date().getTime());
30     });
31     list.tap(function (e) {
32         //        $('input').css("pointer-events", "none");
33         list.hide();
34         setTimeout(function () {
35             list.show();
36             //            $('input').css("pointer-events", "auto");
37         }, 1000);
38     });
39     d.tap(function () {
40         d.append($('<p>div tap</p>'));
41     });
42     
43 </script>
44 </html>

 

http://sandbox.runjs.cn/show/wub3i7fr

此间各位请使用手提式有线电电话机访问试试,现在以此网页有多少个难题:

本人点击海水绿区域会将樱桃红区域隐藏,铁蓝区域没有,一秒后复出,于是大概发生多少个难点:

① 有些浏览器中后边的div tap事件会接触

② input成分必定取得大旨

div事件有些时候大家得以经过阻止冒泡处理,可是input那些难点着力不可调和,因为其赢得核心弹出键盘13分发怒

要素我们是透过三个蒙版化解,先大家来看看是或不是足以给大家的器皿wrapper加上一个css属性化解吧???

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
10         div { display: block; border: 1px solid black; height: 500px; width: 100%; }
11         #input { width: 80px; height: 200px; display: block; }
12     </style>
13     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
14 </head>
15 <body>
16     <div id="list" style="background: gray;">
17     </div>
18     <div id="wrapper">
19         <div id="d">
20             <input type="text" id="input" />
21         </div>
22     </div>
23 </body>
24 <script type="text/javascript">
25     var list = $('#list');
26     var d = $('#d');
27     var input = $('#input');
28     input.tap(function (e) {
29         input.val(new Date().getTime());
30     });
31     list.tap(function (e) {
32         $('#wrapper').css("pointer-events", "none");
33         list.hide();
34         setTimeout(function () {
35             $('#wrapper').css("pointer-events", "auto");
36         }, 350)
37         setTimeout(function () {
38             list.show();
39         }, 1000);
40     });
41     d.tap(function () {
42         d.append($('<p>div tap</p>'));
43     });
44     
45 </script>
46 </html>

http://sandbox.runjs.cn/show/1wldtigt

能够看到,大家消除了点透的标题,所以有自家有这几个厉害的同事是很幸运的,有了这些方案,大家就足以在zepto中封装大家的代码了

在tap点击后为容器标签设置该属性,350ms后撤回即可,那样能够最大程度的卷入代码不会修改

而是那个方案不是绝非难点:

最要害的是她依旧有个小时阀值,经过我测试时350ms,意思是本人利用tap事件后会有350ms的风云有些区域完全不能够点击

那就是说容器所占区域小的话还可接受,假如所占区域大的话正是惊恐不已的梦,因为用户的点击显明晤面世障碍

然后,究竟会点透的场合不是绝大部分,所以此方案仍有通病,最后依旧得动一些其余力气

后续

此次tap的切磋先到那里,大家大家有时机再持续,所以回来大家前几日的主题吧!!!

浏览器检查和测试手提式有线话机是不是安装app

本条必要初次建议其实让人感觉很难堪,至少自身是很为难的,因为压根就找不到点子嘛,经过周五晚间的纠结,基本就扬弃了

第3天也给老大说搞不定,老大基本也仍为搞不定,但是这几个需如若最大的特别建议的,所以跟进力度很强,那不是,过了没多长期就来了个vip(代表级别高……)

哥来了就寄出了宝贝,先是3个外国的网站,然后就是大家故事中的Tmall了

PS:说实话,即使电脑的事体与Tmall非亲非故,不过老夫今后对Tmall依旧相比怨念的!!!!

天猫商城不愧是标准技术抢先的技巧团队,大家来看看他的网站:

图片 1

别的不必关怀,大家就看那些“立刻打开”!!!各位知道手提式有线电话机上那几个即时打开干了怎么呢?

这些东西格外,假使依照了app
的话点击立刻打开就会打开app,要是没有服从的话居然跳向了市面连续

在一些时候那些对等与她有二个a标签会依据必要而赢得区别的值!!!

只是,大家明白打开app是设置了app才会打开的,不然便是个死链接,死链接必然打不开!于是带着奇怪带着敬畏,大家开拓了天猫商城的js库

PS:天猫商城压缩混淆后js确实非常小,而且从不运用类库哦

图片 2

 

诸君看官直接找到那几个目录吧,于是进去大家一步步跟进去:

① 点击点

即便如此小生本领不行,可是读代码照旧入门的,所以国内一旦出了何等心技术,基本极快就能普及,那正是国内的技巧,不是做不出去,正是不通晓做出了是怎么样样子

如若您做出了,那么笔者也能做出了,并且做的更好,所以我们缺乏立异啊……

图片 3

咱俩找到了入口,于是进入install方法

② install

图片 4

这群代码一目精通,读到这里,其实能够很随便的猜想实现方案了!

图片 5

③ 推测达成方案

于是小编就起来质疑,推断的结果正是:

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

自然,最后发现二个标题:手提式有线电电话机上网页无法失去主题,那只是本身自身的判断(无法失去核心),所以最终也吐弃了这几个猜想

④ 陷入僵局

于是乎思路再一次陷入僵局,职责不可能落到实处,但是将天猫商城代码搞下去,也不能落实,最终就从头以各个漫无目标,垃圾的方法搞,终于不留神成功了一遍!!!

无意义的中标是因为将定时器设置的十分的大……

⑤ 消除方案

最后发现了方案,安装app
的气象下,网页会进来后台打开app!!!

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

天猫商城执行的阀值是600,我们差不多是900,所以平昔在原地踏步了很久

本条网页进入后台却成了消除难点的最首要,于是新鲜代码出来了:

 1 var log = function (msg) {
 2     $('body').before('<div class="log">' + msg + '</div>');
 3 };
 4 var timeout, t = 1000, hasApp = true;
 5 setTimeout(function () {
 6     if (hasApp) {
 7         log('安装了app');
 8         $('#dl_app').hide();
 9 
10     } else {
11         log('未安装app');
12         $('#dl_app').show();
13         log('开始强制下载');
14         forceDownload();
15     }
16 }, 2000)
17 function testApp() {
18     var t1 = Date.now();
19     var ifr = $('<iframe id="ifr"></iframe>')
20     ifr.attr('src', '您们app的协议');
21     $('body').append(ifr);
22     timeout = setTimeout(function () {
23         try_to_open_app(t1);
24     }, t);
25 }
26 function try_to_open_app(t1) {
27     var t2 = Date.now();
28     if (!t1 || t2 - t1 < t + 200) {
29         hasApp = false;
30     }
31 }
32 testApp();

将那段代码参加网站首页1-2秒后hasApp就会报告我们是还是不是安装了app,当然难点也很明显:

缺陷


经测试,借使未安装app的图景下,safari会给出多个alert类似的提醒,老夫将它去不掉!!!

PS:如若各位知道怎么去掉,请赐教


进入H5站点,假设设置了app便会打开app,那几个是无力回天防止的

除开上边三个较明朗的瑕疵,其余幸而了……

结语

我们今日的学习权且到此,也不明了对各位有没有用

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图