前端插件--fastclick解决点透问题
<!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解决点透问题的更多相关文章
- 前端插件之Datatables使用--下篇
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...
- 前端插件@user
分享一个 @user 前端插件 开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...
- Django之前端插件定制之表头
什么是插件? 插件只是辅助,是开发过程中的一个阶段.一般项目一期会用各种插件,迅速将功能.界面搭出来,二期时就改成自己的代码了.大点的公司都有自己的js库,自己开发类似jquery的库. 那接下来就写 ...
- Sublime text3：安装插件SublimeREPL解决不支持input
Sublime text3:安装插件SublimeREPL解决不支持input 安装SublimeREPL 1,调用ctrl+shift+p 输入install回车: 2,输出:sublimerepl ...
- 【转】chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法
第一种:开启开发者模式即可 (推荐) chrome 的设置 -> 更多工具 -> 扩展程序,开启开发者模式即可! 第二种方法:修改参数 首先打开下面地址:chrome://flags/# ...
- eclipse 智能提示js和jquery等前端插件
使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键, 根据自 ...
- Xcode升级插件失效解决办法-升级版
Xcode升级插件失效解决办法 每每升级Xcode,第三方插件总是中枪.解决办法也基本是依据http://joeshang.github.io/2015/04/10/fix-xcode-upgrade ...
- 前端插件之Bootstrap Dual Listbox使用
工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
随机推荐
- 【学术篇】luogu2778 [AHOI2016初中组]迷宫（代码高能！）
好久好久我都没有刷题了. 题目の传送门:https://www.luogu.org/problem/show?pid=2778 题目大意:(啥 题目讲得不够清楚?)平面内有n个以整点(就是坐标都是整数 ...
- 迭代器/生成器/装饰器 /Json & pickle 数据序列化
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- springmvc jar包下载
(1) springmvc jar包下载 提供地址 - qq_31307253的博客 - CSDN博客https://blog.csdn.net/qq_31307253/article/details ...
- codevs1222 信与信封的问题
二分图匹配. 先匹配一次,一定是完美匹配.然后枚举每条边,去掉它,若是不能完美匹配,这条边就必须. #include<cstdio> #include<cstring> #in ...
- win7+64位笔记本安装TensorFlow CPU版
最近要用到Keras框架,而Keras是基于Theano或Tensorflow框架安装的,所以首先要准备底层框架的搭建. 在网上看了一大堆教程头昏脑涨,随便挑了个试一试,竟然捣鼓成功了,记录一下安装过 ...
- 我能不能理解成 ssh中service就相当于与jsp+servlet+dao中的servlet？？？
转文 首先解释面上意思,service是业务层,dao是数据访问层.(Data Access Objects) 数据访问对象 1.Dao其实一般没有这个类,这一般是指java中MVC架构中的model ...
- MUI离线原生打包，利用Android Studio进行原生打包MUI项目
首先从官网http://www.dcloud.io/ 下载HBuilder,用该软件创建一个HTML5的移动APP项目,具体可去官网查看相应的文档. 接下来就是如何将写好的HBuilder引入到我们的 ...
- Origin使用自定义函数拟合曲线函数
(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年10月28日) 最近应该是六叔的物化理论作业要交了吧,很多人问我六叔的作业里面有两道题要怎么进行图像函数的拟合.综 ...
- SpringMVC学习总结
SpringMVC部分重点组建介绍 前端处理器(DispatcherServlet):接受请求,响应结果,是SpringMVC的核心 处理映射器(HandlerMapping):根据URL去查找处理器 ...
- <数据库>MySQL的安装及安装中存在的问题
无脑三连: 下载:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压:任意目录 添加环境变量:WIN10步骤 我的电脑→属性→高级系 ...