移动端Touch事件
案例1:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test Tap</title>
<style>
.touchpad{
width: 100%;
height: 200px;
font-size: 40px;
text-align: center;
line-height: 200px;
background: rgba(0,0,0,0.5);
position: relative;
color: #ddd;
} .ball{
display: none;
position: absolute;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: #7AE6FF;
top: 0;
left: 0;
}
p{
height: 30px;
} </style>
</head>
<body> <p id="desc"></p>
<div id="touchPad" class="touchpad">触摸板</div>
<div id="ball" class="ball"></div> <script src="../js/zepto.js"></script>
<script type="text/javascript">
var touchpad = document.querySelector('#touchPad'),
ball = document.querySelector('#ball'),
desc = document.querySelector('#desc'); //简单的touch事件（废弃）
var touchHandler = function(e){
var type = e.type; //注意touchend的touches和targetTouches为空，只偶有changeTouches获取上次一的touchTlist
if(type != 'touchend'){
var pos = {
x : e.touches[0].clientX,
y : e.touches[0].clientY
} ball.style.left = pos.x + 'px';
ball.style.top = pos.y + 'px';
desc.innerHTML = e.type + '(clienX:'+pos.x+', clientY:'+ pos.y+')';
}else{
desc.innerHTML = e.type ;
} switch(type){
case 'touchstart':
ball.style.display = 'block';
break;
case 'touchmove':
//android的4.4,4.0的bug：只触发touchstart，和一次的touchmove，touchend不触发
//加入evnt.preventDefault
event.preventDefault();
break;
case 'touchend':
ball.style.display = 'none';
break;
}
} touchpad.addEventListener('touchstart',touchHandler);
touchpad.addEventListener('touchmove', touchHandler);
touchpad.addEventListener('touchend', touchHandler); </script> </body>
</html>
案例2：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Test Tap</title>
<style>
.touchpad{
width: 100%;
height: 200px;
font-size: 40px;
text-align: center;
line-height: 200px;
background: rgba(0,0,0,0.5);
position: relative;
color: #ddd;
} .ball{
display: none;
position: absolute;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: #7AE6FF;
top: 0;
left: 0;
}
p{
height: 30px;
} </style>
</head>
<body> <p id="desc"></p>
<div id="touchPad" class="touchpad">触摸板</div>
<div id="ball" class="ball"></div> <script src="../js/zepto.js"></script>
<script type="text/javascript">
var touchpad = document.querySelector('#touchPad'),
ball = document.querySelector('#ball'),
desc = document.querySelector('#desc'); //获取touch的点(兼容mouse事件)
var getTouchPos = function(e){
var touches = e.touches;
if(touches && touches[0]) {
return { x : touches[0].clientX ,
y : touches[0].clientY };
}
return { x : e.clientX , y: e.clientY };
} //计算两点之间距离
var getDist = function(p1 , p2){
if(!p1 || !p2) return 0;
return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
}
//计算两点之间所成角度
var getAngle = function(p1 , p2){
var r = Math.atan2(p2.y - p1.y, p2.x - p1.x);
var a = r * 180 / Math.PI;
return a;
};
//获取swipe的方向
var getSwipeDirection = function(p2,p1){
var dx = p2.x - p1.x;
var dy = -p2.y + p1.y;
var angle = Math.atan2(dy , dx) * 180 / Math.PI; if(angle < 45 && angle > -45) return "right";
if(angle >= 45 && angle < 135) return "top";
if(angle >= 135 || angle < -135) return "left";
if(angle >= -135 && angle <= -45) return "bottom"; } var startEvtHandler = function(e){
var pos = getTouchPos(e);
ball.style.left = pos.x + 'px';
ball.style.top = pos.y + 'px';
ball.style.display = 'block'; var touches = e.touches;
if( !touches || touches.length == 1 ){ //touches为空，代表鼠标点击
point_start = getTouchPos(e);
time_start = Date.now();
}
} var moveEvtHandler = function(e){
var pos = getTouchPos(e);
ball.style.left = pos.x + 'px';
ball.style.top = pos.y + 'px'; point_end = getTouchPos(e);
e.preventDefault();
} //touchend的touches和targetTouches没有对象，只有changeTouches才有
var endEvtHandler = function(e){
ball.style.display = 'none'; var time_end = Date.now(); //距离和时间都符合
if(getDist(point_start,point_end) > SWIPE_DISTANCE && time_start- time_end < SWIPE_TIME){ var dir = getSwipeDirection(point_end,point_start);
touchPad.innerHTML = 'swipe'+dir;
}
} var SWIPE_DISTANCE = 30; //移动30px之后才认为swipe事件
var SWIPE_TIME = 500; //swipe最大经历时间
var point_start,
point_end,
time_start,
time_end; //判断是PC或者移动设备
var startEvt, moveEvt, endEvt;
if("ontouchstart" in window){
startEvt="touchstart";
moveEvt="touchmove";
endEvt="touchend";
}else{
startEvt="mousedown";
moveEvt="mousemove";
endEvt="mouseup";
} touchpad.addEventListener(startEvt, startEvtHandler);
touchpad.addEventListener(moveEvt, moveEvtHandler);
touchpad.addEventListener(endEvt, endEvtHandler); </script> </body>
</html>
移动端Touch事件的更多相关文章
- H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端Touch事件基础
1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
- 移动端 Touch 事件
在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785
随机推荐
- IO编程（1）-文件读写
文件读写 读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接 ...
- Web项目开发中用到的缓存技术
在WEB开发中用来应付高流量最有效的办法就是用缓存技术,能有效的提高服务器负载性能,用空间换取时间.缓存一般用来 存储频繁访问的数据 临时存储耗时的计算结果 内存缓存减少磁盘IO 使用缓存的2个主要原 ...
- [POI2011]ROT-Tree Rotations
发现x的子树在后续处理中不会影响逆序对的情况(只关心有哪些值,相对位置已经不重要了) f[x]表示x为根的子树最小逆序对数 考虑左右儿子交换与否. 暴力是O(n^2)的 考虑线段树合并 左右儿子线段树 ...
- [USACO10OPEN]牛跳房子Cow Hopscotch
题目描述 奶牛们正在回味童年,玩一个类似跳格子的游戏,在这个游戏里,奶 牛们在草地上画了一行N个格子,(3 <=N <= 250,000),编号为1..N. 就像任何一个好游戏一样,这样的 ...
- oracle 视图views
SELECT * FROM DBA_VIEWS WHERE VIEW_NAME='你的视图名'; SELECT * FROM USER_VIEWS WHERE VIEW_NAME='你的视图名'; S ...
- 题解【bzoj1503 [NOI2004]郁闷的出纳员】
Description 给出一个下限 \(m\) ,要求维护以下操作 插入一个数(如果小于下限就不加) 给每个数加上一个数 给每个数减去一个数,并且删除掉 \(< m\) 的所有数 求目前第 \ ...
- bcdiv bcmul
/** * 分 转为 钱 */public static function cent2yuan($price) { return bcdiv($price,100,2);} /** * 元 转为 分 ...
- go语言从零学起(二)--list循环删除元素(转载)
本篇系转载 在使用go的container/list的package时,你可能会无意间踩一个小坑,那就是list的循环删除元素. list删除元素,直观写下来的代码如下: package main i ...
- P2243 电路维修
P2243 电路维修 题目背景 Elf 是来自Gliese 星球的少女,由于偶然的原因漂流到了地球上.在她无依无靠的时候,善良的运输队员Mark 和James 收留了她.Elf 很感谢Mark和Jam ...
- P2054 [AHOI2005]洗牌
P2054 [AHOI2005]洗牌 题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度 ...