1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport"
  6.            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.      <title>Title</title>
  8.      <style>
  9.          .box{
  10.              width: 500px;
  11.              height: 500px;
  12.              border: 1px solid #ccc;
  13.              position: relative;
  14.          }
  15.          .click {
  16.              width: 300px;
  17.              height: 300px;
  18.              background-color: blue;
  19.          }
  20.          .tap{
  21.              width: 200px;
  22.              height: 200px;
  23.              background-color: red;
  24.              position: absolute;
  25.              left: 0;
  26.              top:0;
  27.          }
  28.      </style>
  29.  </head>
  30.  <body>
  31.  <!--
  32.  touch:只能在移动端响应
  33.  click:延迟
  34.  -->
  35.  
  36.  <!--移动端的点透：
  37.  前提：
  38.  1.必须为上面的元素添加touch相关事件，并且让其消失
  39.  2.下面的元素必须能够响应延迟的click事件-->
  40.  <div class="box">
  41.      <div class="click"></div>
  42.      <div class="tap"></div>
  43.  </div>
  44.  <!--<script src="./js/common.js"></script>-->
  45.  <!--下面这个文件包含了touch事件-->
  46.  <script src="./js/zepto.min.js"></script>
  47.  <script src="./js/fastclick.js"></script>
  48.  <script>
  49.      /*var tap = document.querySelector(".tap");*/
  50.      var tap = $(".tap");
  51.      var click = document.querySelector(".click");
  52.  
  53.      /*tap.addEventListener("touchstart",function(){
  54.          tap.style.visibility = "hidden";
  55.      })*/
  56.     /* click.addEventListener("click",function(){
  57.          console.log(123);
  58.      })*/
  59.  
  60.     /* /!*使用自己封装好的Tap事件*!/
  61.      heima.tap(tap,function(e){
  62.          tap.style.visibility = "hidden"
  63.      });*/
  64.  
  65.      /*zepto在努力的解决点透的问题，但是没有完全解决，所以还是会出现点透的现象*/
  66.      /*tap.on("tap",function(e){
  67.          tap[0].style.visibility = "hidden"
  68.      });
  69.      click.addEventListener("click",function(){
  70.          console.log(123);
  71.      })*/
  72.  
  73.      /*fastclick:实现pc和移动端的单击事件的兼容，意味着使用fastclick来绑定事件，可以做到pc和移动都能响应
  74.      * 况且它解决了：
  75.      * 1.解决了touch事件在pc端无法响应的问题
  76.      * 2.解决了click事件在移动端延迟的问题
  77.      * 3.没有点透*/
  78.  
  79.      /*dom方式：*/
  80.      if ('addEventListener' in document) {
  81.          document.addEventListener('DOMContentLoaded', function() {
  82.              /*如果对body绑定，那么意味着body下面的所有元素都会使用fastclick来进行单击事件的处理*/
  83.              FastClick.attach(document.body);
  84.          }, false);
  85.      }
  86.  
  87.      tap[0].addEventListener("click",function(){
  88.          tap[0].style.visibility = "hidden"
  89.      })
  90.      click.addEventListener("click",function(){
  91.          console.log(123);
  92.      })
  93.  </script>
  94.  </body>
  95.  </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. 转载别人的ftp,觉得目录结构不错,学习

    开发简单的FTP:1. 用户登陆2. 上传/下载文件3. 不同用户家目录不同4. 查看当前目录下文件5. 充分使用面向对象知识 REDMAE 1 用户登陆 2 3 1.查看用户目录文件 4 2.上传文 ...

  2. 前缀后缀——cf1167E

    想了很久没弄明白,对于边界的情况还是有问题 等题解出了再看看 然后枚举每个后缀r,找到比它小,并且在其左边的前缀l,那么删<=l,r-1的都可以 最后的二分很迷:要多考虑特殊情况:前缀跑到后缀后 ...

  3. python的meshgrid用法和3D库 mpl_toolkits.mplot3d 与PolynomialFeatures多项式库学习

    meshgrid import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Ax ...

  4. 菜鸟nginx源码剖析数据结构篇（十一） 共享内存ngx_shm_t[转]

    菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...

  5. 从xmlns的作用说起

    查了资料和自己实践后,得出了一些关于xml和xmlns的结论 看一个最常见的javaweb 中xml配置文件的开头: <?xml version="1.0" encoding ...

  6. 使用dubbo中间件出现NoSuchBeanDefinitionException异常

    dubbo中间件中有一个import com.alibaba.dubbo.config.annotation.Service类,在service层添加注解时要注意,我们添加的是import org.s ...

  7. 《DSP using MATLAB》Problem 8.14

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. vue生成条形码/二维码/带logo二维码

    条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...

  9. jdk11下载安装及环境变量配置

    jdk11下载安装及环境变量配置 官网地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-50666 ...

  10. JavaScript数据可视化编程书籍上面的例子(flotr2)

    先看demo再看例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...