js触摸屏案例

js 手机端触发事事件、javascript手机端/移动端触发事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：


1

2

3

4

touchstart:  // 手指放到屏幕上的时候触发 

touchmove:  // 手指在屏幕上移动的时候触发 

touchend:  // 手指从屏幕上拿起的时候触发 

touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

1

2

3

4

client / clientY：// 触摸点相对于浏览器窗口viewport的位置 

pageX / pageY：// 触摸点相对于页面的位置 

screenX /screenY：// 触摸点相对于屏幕的位置 

identifier： // touch对象的unique ID

http://blog.sina.com.cn/s/blog_65c2ec5e0101fexw.html

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

1.touchstart:  // 手指放到屏幕上的时候触发

2.touchmove:  // 手指在屏幕上移动的时候触发

3.touchend:  // 手指从屏幕上拿起的时候触发

4touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

属性

1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置

2.pageX / pageY：// 触摸点相对于页面的位置

3.screenX /screenY：// 触摸点相对于屏幕的位置

4.identifier： // touch对象的unique ID

//touchstart事件

function touchSatrtFunc(e) {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = e.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//记录触点初始位置

startX = x;

startY = y;

}

//touchmove事件

function touchMoveFunc(e) {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

var text = ‘TouchMove事件触发：（‘ + x + ‘, ‘ + y + ‘）‘;

//判断滑动方向

if (x - startX != 0) {

//左右滑动

}

if (y - startY != 0) {

//上下滑动

}

}

手机端html5触屏事件(touch事件)

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。


var obj = document.getElementByIdx_x(‘id‘);


obj.addEventListener(‘touchmove‘, function(event) {


     // 如果这个元素的位置内只有一个手指的话


    if (event.targetTouches.length == 1) {


　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 


        var touch = event.targetTouches[0];


        // 把元素放在手指所在的位置


        obj.style.left = touch.pageX-50 + ‘px‘;


        obj.style.top = touch.pageY-50 + ‘px‘;


        }


}, false);

/*！*****************

  1. @author:meibin
  2. @date:2014-04-03
  3. @功能:移动滑动事件js方法封装
  4. 说明：该方法为考虑使用的灵活性，并未直接封装成插件，只简单的提供了操作事件；
  5. 暂支持：swipeleft 、 swiperight、swipeup 、swipedown 、singleTap、touchstart、touchmove、touchend;等事件；
  6. 左滑动    、  右滑动    、 上滑动  、 下滑动    、  点击    、 触摸开始  、 触摸移动 、触摸结束
  7. ******************/
  8. //手机触屏事件封装；
  9. var TouchEvent = (function(){
  10. return {
  11. touches:function(obj,oEvent,fnd){
  12. /*
  13. 参数说明：
  14. obj   当前的对象；
  15. oEvent  swipeleft 、 swiperight、swipeup 、swipedown 、singleTap、touchstart、touchmove、touchend
  16. fnd 回调函数;
  17. */
  18. var defaults = {
  19. x  : 2,   //默认滑动范围 X 不能小于5;
  20. y  : 2,   //默认滑动范围 Y 不能小于5;
  21. ox : 0,   //默认的开始 x 轴的值；
  22. oy : 0,   //默认的开始 y 轴的值；
  23. nx : 0,   //默认的结束 x 轴的值；
  24. ny : 0    //默认的结束 y 轴的值；
  25. };
  26. oEvent                         = oEvent.toLowerCase(); // 大小写转换；可以减少报错率；
  27. var isTouchPad  = (/hp-tablet/gi).test(navigator.appVersion);
  28. var hasTouch         = ‘ontouchstart‘ in window && !isTouchPad;
  29. var touchStart  = hasTouch ? ‘touchstart‘ : ‘mousedown‘;
  30. var touchMove   = hasTouch ? ‘touchmove‘ : ‘‘;
  31. var touchEnd    = hasTouch ? ‘touchend‘ : ‘mouseup‘;
  32. var scrollY; //用于检测页面是否是滑动或滚动条滚动；
  33. //var scrollX;
  34. var a = {
  35. /*触摸开始方法*/
  36. tStartFun:function(e){
  37. //e.preventDefault();
  38. scrollY= undefined;
  39. //scrollX= undefined;
  40. defaults.ox = e.targetTouches[0].pageX; //手势开始时的X轴位置；
  41. defaults.oy = e.targetTouches[0].pageY; //手势开始时的Y轴位置；
  42. defaults.nx = defaults.ox;
  43. defaults.ny = defaults.oy;
  44. if(oEvent.indexOf("touchstart") != -1){ //如果是绑定的这个事件;
  45. fnd();        //执行回调函数；
  46. };
  47. /*添加 “移动” 事件监听；*/
  48. obj.addEventListener(touchMove,a.tMoveFun,false);
  49. /*添加 “结束” 事件监听；*/
  50. obj.addEventListener(touchEnd,a.tEndFun,false);
  51. },
  52. /*触摸移动方法*/
  53. tMoveFun:function(e){
  54. //if( hasTouch ){ if (
    e.targetTouches.length > 1 || e.scale && e.scale !== 1)
    return };
  55. //e.preventDefault();
  56. //oStop = true;
  57. //多点或缩放
  58. defaults.nx = e.targetTouches[0].pageX; //手势移动时的X轴位置,即最后的值等于手指；
  59. defaults.ny = e.targetTouches[0].pageY; //手势移动时的Y轴位置；
  60. var changeY = defaults.oy - defaults.ny; //手指抬起时 Y 轴的最后值 || (开始时的值 - 移动时的值)；
  61. var changeX = defaults.ox - defaults.nx; //手指抬起时 X 轴的最后值 || (开始时的值 - 移动时的值)；
  62. if ( typeof scrollY == ‘undefined‘ ) {//|| (typeof scrollX == ‘undefined‘)
  63. scrollY = !!( scrollY || Math.abs(changeX ) < Math.abs(changeY) );
  64. //scrollX = !!( scrollX || Math.abs(changeY ) < Math.abs(changeX) );
  65. }
  66. if( !scrollY ){ //当确定页面不是滚动时，才阻止浏览器默认事件;|| !scrollX
  67. e.preventDefault(); //当确定页面不是滚动时，才阻止浏览器默认事件;
  68. if(oEvent.indexOf("touchmove") != -1){//如果是绑定的这个事件;
  69. fnd(); //执行回调函数；
  70. }
  71. }
  72. },
  73. /*触摸结束的方法*/
  74. tEndFun:function(e){
  75. var changeY = defaults.oy - defaults.ny; //手指抬起时 Y 轴的最后值 || (开始时的值 - 移动时的值)；
  76. var changeX = defaults.ox - defaults.nx; //手指抬起时 X 轴的最后值 || (开始时的值 - 移动时的值)；
  77. //如果 最后的X 轴值 大于 Y轴的值 并且 Y轴的值 大于 y= 5 就开始判断事件
  78. // 因为默认如果移动的范围小于 5*5 就当做点击事件处理；
  79. if(Math.abs(changeX)
    > Math.abs(changeY) && Math.abs(changeY) > defaults.y){
  80. //左右事件；
  81. if(changeX > 0){ // 如果 X 轴 的值大于 0 说明用于有移动；就进行事件判断，判断用户绑定的是什么事件；；
  82. if(oEvent.indexOf("swipeleft") != -1){ // 如果绑定的是 向左滑动事件，即执行向左的回调函数；
  83. fnd();//执行回调函数；
  84. }
  85. }else{
  86. if(oEvent.indexOf("swiperight") != -1){ // 如果绑定的是 向左滑动事件，即执行向左的回调函数；
  87. fnd();//执行回调函数；
  88. }
  89. }
  90. }else
    if(Math.abs(changeY) > Math.abs(changeX) && Math.abs(changeX)
    > defaults.x){
  91. //上下事件；
  92. if(changeY > 0){  // 如果 Y 轴 的值大于 0 说明用于有移动；就进行事件判断，判断用户绑定的是什么事件；；
  93. if(oEvent.indexOf("swipeup") != -1){// 向上滑动事件，即执行向上的回调函数；
  94. fnd();
  95. }
  96. }else{
  97. if(oEvent.indexOf("swipedown") != -1) { // 向下滑动事件，即执行向下的回调函数；
  98. fnd();
  99. }
  100. }
  101. }else{
  102. //点击事件；即用户滑动的范围小于默认的5*5
  103. if(oEvent.indexOf("singletap") != -1){ //点击事件
  104. fnd();
  105. }
  106. }
  107. //如果绑定的是 结束 事件；
  108. if(oEvent.indexOf("touchend") != -1){
  109. fnd();
  110. }
  111. /*事件结束时，删除相应的监听事件；*/
  112. obj.removeEventListener(touchMove,a.tMoveFun,false);
  113. obj.removeEventListener(touchEnd,a.tEndFun,false);
  114. }
  115. }
  116. //添加 “开始” 事件监听；
  117. obj.addEventListener(touchStart,a.tStartFun,false);
  118. }
  119. };//return END;
  120. })();

使用示例：
                        var tempWrapId = document.getElementById(‘mMain‘);
                        //向左滑动的事件；
                        TouchEvent.touches(tempWrapId,‘swipeLeft‘,function(event){

if(oStop){
                                       
                                        oStop = false;
                                        i++;
                                        if(i>(max-1)){

i = max-1;
                                                oStop = true;
                                                return false;

}
                                       
                                        $(‘.m-main .m-item‘).find(‘.btn-slide‘).css(‘opacity‘,0);
                                        $(‘#bodyWrap .m-main‘).animate({‘top‘:-(i*itemH)},400);
                                        $(‘.m-main .m-item‘).eq(i).find(‘.btn-slide‘).css(‘opacity‘,1);
                                        oStop = true;
                                }
                                
                        });

手机触摸屏的JS事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

1.touchstart:  // 手指放到屏幕上的时候触发

2.touchmove:  // 手指在屏幕上移动的时候触发

3.touchend:  // 手指从屏幕上拿起的时候触发

4touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

属性

1.client / clientY：// 触摸点相对于浏览器窗口viewport的位置

2.pageX / pageY：// 触摸点相对于页面的位置

3.screenX /screenY：// 触摸点相对于屏幕的位置

4.identifier： // touch对象的unique ID

//touchstart事件

function touchSatrtFunc(e) {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = e.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//记录触点初始位置

startX = x;

startY = y;

}

//touchmove事件

function touchMoveFunc(e) {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

var text = ‘TouchMove事件触发：（‘ + x + ‘, ‘ + y + ‘）‘;

//判断滑动方向

if (x - startX != 0) {

//左右滑动

}

if (y - startY != 0) {

//上下滑动

}

}

让bootstrap默认slider支持触屏设备

var isTouch=(‘ontouchstart‘ in window);
if(isTouch){
	$(".carousel").on(‘touchstart‘, function(e){
		var that=$(this);
		var touch = e.originalEvent.changedTouches[0];
		var startX = touch.pageX;
		var startY = touch.pageY;
		$(document).on(‘touchmove‘,function(e){
			touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
			var endX=touch.pageX - startX;
			var endY=touch.pageY - startY;
			if(Math.abs(endY)<Math.abs(endX)){
				if(endX > 10){
					$(this).off(‘touchmove‘);
					that.carousel(‘prev‘);
				}else if (endX < -10){
					$(this).off(‘touchmove‘);
					that.carousel(‘next‘);
				}
				return false;
			}
		});
	});
	$(document).on(‘touchend‘,function(){
		$(this).off(‘touchmove‘);
	});
}
时间： 2024-07-29 10:04:58

js触摸屏案例的相关文章

正則表達式--js使用案例

前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式. 曾经都是直接复制使用,这次理解原理.自己原生写. 接前两篇:js使用案例. //检測控件内容内容格式--控制为"2014-07-21". functioncheckDate(formContorId,message){ // 获取控件对象. var temp = document.ge

正则表达式--js使用案例

前言:在前端页面使用中,遇到日期格式的验证,开始使用了一款表单控件验证,但是不兼容!!而且使用起来还受到很大约束,所以就决定自己写原生js.为了完成日期格式的验证,第一步,当然是学会使用正则表达式.以前都是直接复制使用,这次理解原理,自己原生写. 接前两篇:js使用案例. //检测控件内容内容格式--控制为"2014-07-21". functioncheckDate(formContorId,message){ // 获取控件对象. var temp = document.getEl

JS小案例分析

a.微博输入删除小案例 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 600px; margin: 100px auto; b

C3.js入门案例

C3.js是基于D3.js开发的JavaScript库,它可以让开发者构建出可复用的图表,并且还提供了一系列图表上的交互行为.通过C3,只需要往generate函数中传入数据对象就可以轻松的绘制出图表,方便开发者使用.接下来,一步步来完成一个小案例创建. 1.安装 在C3.js的代码托管地址(https://github.com/c3js/c3)下载c3-master,里面有我们构建图表所必须的文件,其中最主要的就是c3.css.c3.min.js.由于C3依赖于D3,所以你也需要下载D3,我们

node.js(小案例)_实现学生信息增删改

一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项目的入口: /** * app.js 入门模块 * 职责: * 创建服务 * 做一些服务相关配置 * 模板引擎 * body-parser 解析表单 post 请求体 * 提供静态资源服务 * 挂载路由 * 监听端口启动服务 */ var express = require('express') v

10个js小案例

知识梳理: 1.DOM(document object model)文档对象模型:html(标签对象集合) 标签名获取对象:document.getElementsByTagName('标签名');//返回的是一个数组 类名获取对象:document.getElementsClassName('类名’);//返回的是一个数组 id获取(id唯一):document.getElementById(); 获取内容标签:innerText,innerHTML 区别:innerHTML可以把标签写进ht

Vue.js小案例(2)

即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] { display: none; } *{ margin:0; padding:0; } body{ font-family:Microsoft YaHei; text-align:center; } li{ list-style:none; } .bar{ background-color:#5

js定时器案例

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>定时器案例</title>     <script>         var myCount = 5;         function count() {             document.getElementById("test&q

Vue.js小案例(1)

数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div> <script> // 这是我们的Model n