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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
原生JS实现烟花效果
Mar 10 Javascript
js编写简易的计算器
Jul 29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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
php中执行系统命令的方法
2015/03/21 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
幼儿园家长会邀请函
2014/01/15 职场文书
建筑个人求职信范文
2014/01/25 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
学校少先队工作总结
2015/08/12 职场文书
亲情作文之母爱
2019/09/25 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
golang 在windows中设置环境变量的操作
2021/04/29 Golang
如何获取numpy array前N个最大值
2021/05/14 Python
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技