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. ******************/
9. //手机触屏事件封装；
10. var TouchEvent = (function(){
11.         return {
13.                 touches:function(obj,oEvent,fnd){
14.                         /*
15.                         参数说明：
16.                                 obj   当前的对象；
17.                                 oEvent  swipeleft 、 swiperight、swipeup 、swipedown 、singleTap、touchstart、touchmove、touchend
18.                                 fnd 回调函数;
20.                         */
21.                         var defaults = {
23.                                 x  : 2,   //默认滑动范围 X 不能小于5;
24.                                 y  : 2,   //默认滑动范围 Y 不能小于5;
25.                                 ox : 0,   //默认的开始 x 轴的值；
26.                                 oy : 0,   //默认的开始 y 轴的值；
27.                                 nx : 0,   //默认的结束 x 轴的值；
28.                                 ny : 0    //默认的结束 y 轴的值；
30.                         };
32.                         oEvent                         = oEvent.toLowerCase(); // 大小写转换；可以减少报错率；
33.                         var isTouchPad  = (/hp-tablet/gi).test(navigator.appVersion);
34.                         var hasTouch         = 'ontouchstart' in window && !isTouchPad;
35.                         var touchStart  = hasTouch ? 'touchstart' : 'mousedown';
36.                         var touchMove   = hasTouch ? 'touchmove' : '';
37.                         var touchEnd    = hasTouch ? 'touchend' : 'mouseup';
38.                         var scrollY; //用于检测页面是否是滑动或滚动条滚动；
40.                         //var scrollX;
41.                         var a = {
43.                                 /*触摸开始方法*/
44.                                 tStartFun:function(e){
45.                                         //e.preventDefault();
46.                                         scrollY= undefined;
47.                                         //scrollX= undefined;
48.                                         defaults.ox = e.targetTouches[0].pageX; //手势开始时的X轴位置；
49.                                         defaults.oy = e.targetTouches[0].pageY; //手势开始时的Y轴位置；
50.                                         defaults.nx = defaults.ox;
51.                                         defaults.ny = defaults.oy;
53.                                         if(oEvent.indexOf("touchstart") != -1){ //如果是绑定的这个事件;
55.                                                 fnd();        //执行回调函数；
56.                                         };
58.                                         /*添加 “移动” 事件监听；*/
59.                                         obj.addEventListener(touchMove,a.tMoveFun,false);
60.                                         /*添加 “结束” 事件监听；*/
61.                                         obj.addEventListener(touchEnd,a.tEndFun,false);
63.                                 },
64.                                 /*触摸移动方法*/
65.                                 tMoveFun:function(e){
66.                                         //if( hasTouch ){ if ( e.targetTouches.length > 1 || e.scale && e.scale !== 1) return };
67.                                         //e.preventDefault();
68.                                         //oStop = true;
69.                                          //多点或缩放
71.                                         defaults.nx = e.targetTouches[0].pageX; //手势移动时的X轴位置,即最后的值等于手指；
72.                                         defaults.ny = e.targetTouches[0].pageY; //手势移动时的Y轴位置；
73.                                         var changeY = defaults.oy - defaults.ny; //手指抬起时 Y 轴的最后值 || (开始时的值 - 移动时的值)；
74.                                         var changeX = defaults.ox - defaults.nx; //手指抬起时 X 轴的最后值 || (开始时的值 - 移动时的值)；
76.                                         if ( typeof scrollY == 'undefined' ) {//|| (typeof scrollX == 'undefined')
77.                                                  scrollY = !!( scrollY || Math.abs(changeX ) < Math.abs(changeY) );
78.                                                  //scrollX = !!( scrollX || Math.abs(changeY ) < Math.abs(changeX) );
79.                                         }
80.                                         if( !scrollY ){ //当确定页面不是滚动时，才阻止浏览器默认事件;|| !scrollX
82.                                                 e.preventDefault(); //当确定页面不是滚动时，才阻止浏览器默认事件;
84.                                                 if(oEvent.indexOf("touchmove") != -1){//如果是绑定的这个事件;
86.                                                         fnd(); //执行回调函数；
87.                                                 }
88.                                         }
90.                                 },
92.                                 /*触摸结束的方法*/
93.                                 tEndFun:function(e){
95.                                         var changeY = defaults.oy - defaults.ny; //手指抬起时 Y 轴的最后值 || (开始时的值 - 移动时的值)；
96.                                         var changeX = defaults.ox - defaults.nx; //手指抬起时 X 轴的最后值 || (开始时的值 - 移动时的值)；
98.                                         //如果 最后的X 轴值 大于 Y轴的值 并且 Y轴的值 大于 y= 5 就开始判断事件
99.                                         // 因为默认如果移动的范围小于 5*5 就当做点击事件处理；
100.                                         if(Math.abs(changeX) > Math.abs(changeY) && Math.abs(changeY) > defaults.y){
102.                                                 //左右事件；
103.                                                 if(changeX > 0){ // 如果 X 轴 的值大于 0 说明用于有移动；就进行事件判断，判断用户绑定的是什么事件；；
104.                                                         if(oEvent.indexOf("swipeleft") != -1){ // 如果绑定的是 向左滑动事件，即执行向左的回调函数；
105.                                                                 fnd();//执行回调函数；
106.                                                         }
107.                                                 }else{
109.                                                         if(oEvent.indexOf("swiperight") != -1){ // 如果绑定的是 向左滑动事件，即执行向左的回调函数；
110.                                                                 fnd();//执行回调函数；
111.                                                         }
113.                                                 }
115.                                         }else if(Math.abs(changeY) > Math.abs(changeX) && Math.abs(changeX) > defaults.x){
117.                                                 //上下事件；
118.                                                 if(changeY > 0){  // 如果 Y 轴 的值大于 0 说明用于有移动；就进行事件判断，判断用户绑定的是什么事件；；
120.                                                         if(oEvent.indexOf("swipeup") != -1){// 向上滑动事件，即执行向上的回调函数；
121.                                                                 fnd();
122.                                                         }
123.                                                 }else{
125.                                                         if(oEvent.indexOf("swipedown") != -1) { // 向下滑动事件，即执行向下的回调函数；
126.                                                                 fnd();
127.                                                         }
129.                                                 }
130.                                         }else{
131.                                                 //点击事件；即用户滑动的范围小于默认的5*5
132.                                                 if(oEvent.indexOf("singletap") != -1){ //点击事件
133.                                                         fnd();
134.                                                 }
136.                                         }
138.                                         //如果绑定的是 结束 事件；
139.                                         if(oEvent.indexOf("touchend") != -1){
140.                                                 fnd();
141.                                         }
143.                                         /*事件结束时，删除相应的监听事件；*/
144.                                         obj.removeEventListener(touchMove,a.tMoveFun,false);
145.                                         obj.removeEventListener(touchEnd,a.tEndFun,false);
146.                                 }
148.                         }
149.                         //添加 “开始” 事件监听；
150.                         obj.addEventListener(touchStart,a.tStartFun,false);
152.                 }
154.         };//return END;
156. })();

使用示例：
                        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');
	});	
}