前端插件--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 ...
随机推荐
- 五. Arrow Function 箭头函数
箭头函数三大好处: 1. 简明的语法 举例: 如果只有一个参数,可以不加(),多个参数用 "," 隔开 2. 隐式返回 首先说下什么是显示返回,显示返回就是 return 加上你要 ...
- leetcode-第5周双周赛-1135-最低成本联通所有城市
方法一: class Solution: def minimumCost(self, N: int, conections: List[List[int]]) -> int: def find( ...
- 【JZOJ3316】非回文数字
description 如果一个字符串从后往前读与从前往后读一致,我们则称之为回文字符串.当一个数字不包含长度大于1的子回文数字时称为非回文数字.例如,16276是非回文数字,但17276不是,因为它 ...
- 开发函数计算的正确姿势 —— 使用 ROS 进行资源编排
前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算 ...
- csps模拟67神炎皇，降雷皇，幻魔皇题解
题面:https://www.cnblogs.com/Juve/articles/11648975.html 神炎皇: 打表找规律?和$\phi$有关? 答案就是$\sum\limits_{i=2}^ ...
- TF坐标变换
一.什么是TF 二.TF使用方法 三.TF包内的指令工具 四.相关API 1.广播变换发布坐标之间的坐标关系 #include <ros/ros.h> #include <tf ...
- IO流读取和写入文件
package com.xmlmysql.demo.config; import java.io.BufferedReader; import java.io.BufferedWriter; impo ...
- 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透
可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...
- java编程题古典算法之兔子问题
1.题目如下. 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 分析每个月的兔子对数: 1---- ...
- MFC ,List使用
出自http://www.cnblogs.com/yuehui/archive/2012/06/15/2550449.html List容器双向线性表list容器 list类定义了双向的线性表.V ...