移动端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
随机推荐
- Android 程序架构： MVC、MVP、MVVM、Unidirectional、Clean...
摘选自:GUI 应用程序架构的十年变迁:MVC.MVP.MVVM.Unidirectional.Cleanhttps://zhuanlan.zhihu.com/p/26799645 MV* in An ...
- 【bzoj4084】【sdoi2015】双旋转字符串
题解 首先题中说了$n>=m$; 分成的循环串左右两边为本质相同的单循环串循环串,分别长为$l = \frac{n + m}{2} $; 所以$S$串的前$l$位为双循环串的一半$S1$,后一半 ...
- 我们使用git checkout 将B分支上的部分页面代码 添加或覆盖到A分支上
$ git branch * A B $ git checkout B message.html message.css message.js other.js $ git status # On b ...
- Swarm配置文件管理
一.前言 Docker 17.06引入了swarm服务配置,允许您在服务映像外部或运行容器中存储非敏感信息,例如配置文件. 这允许您保持镜像尽可能通用,而无需将配置文件绑定到容器或使用环境变量.在Sw ...
- vs配置SP++3.0
最近在研究信号处理的C语言算法,突然发现一个西安交大的师兄之前已经写出来了一个完整的库,同样是研究生三年,差别怎么这样大呢. 先从用轮子开始吧. 一.SP++3.0安装及测试 官网下载地址: http ...
- VS2010 中更改项目名称
Time.vcxproj修改项目名称,主要是通过以下几个步骤就能完成: 修改解决方案的名称. 修改解决项目名称. 修改项目的程序集名称和默认命名空间 替换整个项目或解决方案中的出现该名称的地方. 修改 ...
- linux split 切割大文件
语法: split [-l <行数>] [-b <字节>] [-C <字节>] [要切割的目标文件] [输出文件名前缀] 说明: -l <行数> 指定 ...
- Java并发编程原理与实战三十一:Future&FutureTask 浅析
一.Futrue模式有什么用?------>正所谓技术来源与生活,这里举个栗子.在家里,我们都有煮菜的经验.(如果没有的话,你们还怎样来泡女朋友呢?你懂得).现在女票要你煮四菜一汤,这汤是鸡汤, ...
- Java并发编程原理与实战二十八：信号量Semaphore
1.Semaphore简介 Semaphore,是JDK1.5的java.util.concurrent并发包中提供的一个并发工具类. 所谓Semaphore即 信号量 的意思. 这个叫法并不能很好地 ...
- Druid.io启用SQL支持
Druid.io的SQL功能虽然在试验阶段,但是也支持了大部分的功能,而且还可以通过 Avatica JDBC查看请求的json,有助于我们理解Druid.io的语法.Druid.io有个比较坑的是, ...