移动端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
随机推荐
- 针对Weblogic测试的一些小总结(转）
1. 管理员登录页面弱密码 Weblogic的端口一般为7001,弱密码一般为weblogic/Oracle@123 or weblogic,或者根据具体情况进行猜测,公司名,人名等等,再有就可以用b ...
- substring()方法到底做了什么？不同版本的JDK中是否有区别？为什么？
该文章是图说Java系列文章中的一篇 substring(int beginIndex, int endIndex)方法在jdk 6和jdk 7中的实现是不同的.了解他们的区别可以帮助你更好的使用 ...
- Android实现透明的颜色效果(zz)
android Button或者ImageButton背景透明状态设置 设置Button或ImageButton的背景为透明或者半透明 半透明< Button android:backgroun ...
- Android之断点续传下载(转)
Android之断点续传下载http://www.cnblogs.com/zxl-jay/archive/2011/10/09/2204195.html
- 解题：HEOI 2012 采花
题面 题外话:LYD说他当时看错题了,考场爆零了,然后有了作诗这道题=.= 离线处理询问,按右端点递增排序,然后对于每种花$flw[i]$,我们求一个$pre[flw[i]]$表示这种花上一次出现的位 ...
- 【noip模拟】D（==）
Portal --> who knows == Description 数轴上面有一些洞,有一些老鼠,每个洞有一个容量限制,一只位于\(x\)的老鼠进到位于\(y\)的洞要花费\(|x-y|\) ...
- 【最小割】【网络流24题】【P2762】 太空飞行计划问题
Description W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进行这些实验需要使 ...
- 配置iOS项目的设备系统目标设置：Base SDK和Deployment Target
配置iOS项目的设备系统目标设置:Base SDK和Deployment Target Xcode为开发者提供了两个可配置的设置:第一个是Base SDK,第二个是iOS的Deployment Tar ...
- hihocoder #1162 矩阵加速dp
#1162 : 骨牌覆盖问题·三 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 前两周里,我们讲解了2xN,3xN骨牌覆盖的问题,并且引入了两种不同的递推方法.这一次我 ...
- NATS_02：NATS消息通信模型
消息通信模型 NATS的消息通信是这样的:应用程序的数据被编码为一条消息,并通过发布者发送出去:订阅者接收到消息,进行解码,再处理.订阅者处理NATS消息可以是同步的或异步的. * 异步处理 异步处 ...