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');
	});
}