<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <title>Title</title>

     <style>

         .box{

             width: 500px;

             height: 500px;

             border: 1px solid #ccc;

             position: relative;

         }

         .click {

             width: 300px;

             height: 300px;

             background-color: blue;

         }

         .tap{

             width: 200px;

             height: 200px;

             background-color: red;

             position: absolute;

             left: 0;

             top:0;

         }

     </style>

 </head>

 <body>

 <!--

 touch:只能在移动端响应

 click:延迟

 -->

 <!--移动端的点透：

 前提：

 1.必须为上面的元素添加touch相关事件，并且让其消失

 2.下面的元素必须能够响应延迟的click事件-->

 <div class="box">

     <div class="click"></div>

     <div class="tap"></div>

 </div>

 <!--<script src="./js/common.js"></script>-->

 <!--下面这个文件包含了touch事件-->

 <script src="./js/zepto.min.js"></script>

 <script src="./js/fastclick.js"></script>

 <script>

     /*var tap = document.querySelector(".tap");*/

     var tap = $(".tap");

     var click = document.querySelector(".click");

     /*tap.addEventListener("touchstart",function(){

         tap.style.visibility = "hidden";

     })*/

    /* click.addEventListener("click",function(){

         console.log(123);

     })*/

    /* /!*使用自己封装好的Tap事件*!/

     heima.tap(tap,function(e){

         tap.style.visibility = "hidden"

     });*/

     /*zepto在努力的解决点透的问题，但是没有完全解决，所以还是会出现点透的现象*/

     /*tap.on("tap",function(e){

         tap[0].style.visibility = "hidden"

     });

     click.addEventListener("click",function(){

         console.log(123);

     })*/

     /*fastclick:实现pc和移动端的单击事件的兼容，意味着使用fastclick来绑定事件，可以做到pc和移动都能响应

     * 况且它解决了：

     * 1.解决了touch事件在pc端无法响应的问题

     * 2.解决了click事件在移动端延迟的问题

     * 3.没有点透*/

     /*dom方式：*/

     if ('addEventListener' in document) {

         document.addEventListener('DOMContentLoaded', function() {

             /*如果对body绑定，那么意味着body下面的所有元素都会使用fastclick来进行单击事件的处理*/

             FastClick.attach(document.body);

         }, false);

     }

     tap[0].addEventListener("click",function(){

         tap[0].style.visibility = "hidden"

     })

     click.addEventListener("click",function(){

         console.log(123);

     })

 </script>

 </body>

 </html>

前端插件--fastclick解决点透问题的更多相关文章

  1. 前端插件之Datatables使用--下篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...

  2. 前端插件@user

    分享一个 @user 前端插件   开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...

  3. Django之前端插件定制之表头

    什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...

  4. Sublime text3：安装插件SublimeREPL解决不支持input

    Sublime text3:安装插件SublimeREPL解决不支持input 安装SublimeREPL 1,调用ctrl+shift+p 输入install回车: 2,输出:sublimerepl ...

  5. 【转】chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法

    第一种:开启开发者模式即可 (推荐) chrome  的设置 -> 更多工具 -> 扩展程序,开启开发者模式即可! 第二种方法:修改参数 首先打开下面地址:chrome://flags/# ...

  6. eclipse 智能提示js和jquery等前端插件

    使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键,   根据自 ...

  7. Xcode升级插件失效解决办法-升级版

    Xcode升级插件失效解决办法 每每升级Xcode,第三方插件总是中枪.解决办法也基本是依据http://joeshang.github.io/2015/04/10/fix-xcode-upgrade ...

  8. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  9. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

随机推荐

  1. 2016.8.19上午初中部NOIP普及组比赛总结

    2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...

  2. 拓扑排序+并查集——cf1131D

    以前做过了忘记掉了..拓扑排序如果要处理等于关系,就要用并查集把相等关系进行缩点 /* 1.相等关系用并查集合并 2.不等关系用有向边链接 3.拓扑排序求顺序 */ #include<bits/ ...

  3. Codeforces Round #599 (Div. 2)的简单题题解

    难题不会啊…… 我感觉写这个的原因就是因为……无聊要给大家翻译题面 A. Maximum Square 简单题意: 有$n$条长为$a_i$,宽为1的木板,现在你可以随便抽几个拼在一起,然后你要从这一 ...

  4. CSS或HTML如何实现文字下面加点？

    就像word里文字加着重号一样,在字的下面加一个点,用CSS怎么做?注意,我说的是下面加点,不是文字加粗或倾斜,请不要回答<strong>或<em>之类的. 把要着重加点的文字 ...

  5. Java-Shiro：目录

    ylbtech-Java-Shiro:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://yl ...

  6. Spring MVC(十三)--保存并获取属性参数

    这里的属性参数主要是指通过request.session.cookie等设置的属性,有时候我们需要将一些请求的参数保存到HTTP的request或者session对象中去,在控制器中也会进行设置和获取 ...

  7. Could not resolve placeholder 'CUST_INDUSTORY' in string value "${CUST_INDUSTORY}"

    问题描述 项目中的资源文件中写了个properties文件,内容这样的 CUST_FROM=002 CUST_INDUSTORY=001 CUST_LEVEL=006 在springmvc配置文件中加 ...

  8. MessageBox用法

    一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口句柄, ...

  9. jdom xpath定位带xmlns命名空间的节点（转）

    jdom xpath定位带xmlns命名空间的节点 2013-06-29      0个评论       作者:baozhengw 收藏    我要投稿 关键词:jdom xpath xmlns 命名 ...

  10. 初识莫队——小Z的袜子

    以前一直觉得莫队是多么高大上的一种算法,然而仔细看了下发现其实并不复杂,实质上就是技巧性的暴力美学. 在我看来莫队是一种分块排序后降低复杂度的算法,当答案可以通过左右端点一个一个移动维护出来的时候就可 ...