js实现滑动触屏事件监听的方法


Posted in Javascript onMay 05, 2015

本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下:

function span_move_fun(){
 var span = document.getElementById("move_k");
 var span_left = $(span).offset().left;
 var span_top = $(span).offset().top;
 var start_left = $(span).offset().left;
 var start_top = $(span).offset().top;
 span.addEventListener('touchstart', function(event) {
 event.preventDefault();
 if (event.targetTouches.length == 1) {
   var touch = event.targetTouches[0];
   span.style.position = "absolute";
 span_top = $(this).offset().top;
 span_left = $(this).offset().left;
 start_top = touch.pageY
 start_left = touch.pageX
   var left = parseFloat(touch.pageX - start_left + span_left-30);
   var top = parseFloat(touch.pageY - start_top + span_top-73);
 span.style.left = String(left) + 'px';
 span.style.top = String(top) + 'px';
   }
  });
  span.addEventListener('touchmove', function(event) {
 event.preventDefault();
 if (event.targetTouches.length == 1) {
 var touch = event.targetTouches[0];
 span.style.position = "absolute";
 var left = parseFloat(touch.pageX - start_left + span_left-30);
   var top = parseFloat(touch.pageY - start_top + span_top-73);
 span.style.left = String(left) + 'px';
 span.style.top = String(top) + 'px';
 }
 });
  span.addEventListener('touchend', function(event) {
  var touch = event.changedTouches[0];
  if(parseFloat(touch.pageX - start_left + span_left-30) <= -5 || parseFloat(touch.pageX - start_left + span_left-30) >= 620 || parseFloat(touch.pageY - start_top + span_top-73) <= -38 || parseFloat(touch.pageY - start_top + span_top-73) >= 587){
  span.style.left = String(span_left-30) + 'px';
 span.style.top = String(span_top-73) + 'px';
  }
 event.stopPropagation();
 });
}

js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

touchstart在触摸开始时触发事件

touchend在触摸结束时触发事件

touchmove这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。

下面是一段代码实例:

document.getElementsByTagName_r('body')[0].addEventListener('touchstart',function(e){
  nStartY = e.targetTouches[0].pageY;
  nStartX = e.targetTouches[0].pageX;
});
document.getElementsByTagName_r('body')[0].addEventListener('touchend',function(e){
  nChangY = e.changedTouches[0].pageY;
  nChangX = e.changedTouches[0].pageX;
});

PS:
1. touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好,已经把这个问题完美的避免掉了。

2. 注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
js实现3D旋转相册
Aug 02 Javascript
JS根据生日算年龄的方法
May 05 #Javascript
js改变Iframe中Src的方法
May 05 #Javascript
js网页滚动条滚动事件实例分析
May 05 #Javascript
jquery判断单选按钮radio是否选中的方法
May 05 #Javascript
JQuery中Bind()事件用法分析
May 05 #Javascript
JS判断字符串包含的方法
May 05 #Javascript
JS实用的动画弹出层效果实例
May 05 #Javascript
You might like
ajax在joomla中的原生态应用代码
2012/07/19 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
python中的global关键字的使用方法
2019/08/20 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
热门专业求职信
2014/05/24 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
我收到了德劲DE1107
2022/04/05 无线电