移动端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
随机推荐
- Java EE之JSTL（上）
1.JSP标签和JSTL简介 JSP标签看起来就像普通的HTML或者XML标签一样.一个JSP标签将执行某些操作. 为了引用JSP标签必须使用正确的XML命名空间. <%@ taglib pre ...
- 配置iOS项目的设备系统目标设置：Base SDK和Deployment Target
配置iOS项目的设备系统目标设置:Base SDK和Deployment Target Xcode为开发者提供了两个可配置的设置:第一个是Base SDK,第二个是iOS的Deployment Tar ...
- Docker入门与应用系列（二）镜像管理
1.1 什么是镜像 简单说,Docker镜像是一个不包含Linux内核而又精简的Linux操作系统. 1.2 镜像从哪里来 Docker Hub是由Docker公司负责维护的公共注册中心,包含大量的容 ...
- Java基础-IO流对象之字节流（Stream）
Java基础-IO流对象之字节流(Stream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在前面我分享的笔记中,我们一直都是在操作文件或者文件夹,并没有给文件中写任何数据.现 ...
- Oracle的基本语法，存储函数及触发器
1.PL/SQL PL/SQL是Oracle对 ql语言的过程化扩展,指在 SQL 命令语言中增加了过程处理语句,使SQL语言具有过程处理能力.把 SQL 语言的数据操纵能 力与过程语言的数据 ...
- 跨域问题 Uncaught DOMException: Blocked a frame with origin。。。
第三方系统内嵌 到iframe中的 跨域问题. 解决方案: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
- 15 Most Read Data Science Articles in 2015. So far …
15 Most Read Data Science Articles in 2015. So far … We've compiled the latest set of "most rea ...
- Grafana关键词
The open platform for beautiful analytics and monitoring. data source.panels.apps.dashboards. Organi ...
- [HAOI2006]旅行 题解（kruskal）
[HAOI2006]旅行 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N个景点(编号为1,2,3,-,N),这些景点被M条道路连接着,所有道路都 ...
- TensorFlow在win10上的安装与使用（三）
本篇博客介绍最经典的手写数字识别Mnist在tf上的应用. Mnist有两种模型,一种是将其数据集看作是没有关系的像素值点,用softmax回归来做.另一种就是利用卷积神经网络,考虑局部图片像素的相关 ...