行测 R语言 parsing memory pygame vue框架 vue全局组件 vue安装教程 less官网 java商城源码 node卸载命令 kafka消费不到数据 vue与html5 docker导入镜像 python多线程编程 python类和对象 python创建文件 python路径设置 java编程 java时间类 java安装教程 java列表 怎么安装linux ILspy abaqus最新版本 matlab2016a安装教程 御旌是什么 图片批量处理工具 快捷精灵 assist是什么意思 疯狂java讲义 js给标签添加属性 目标聚光灯 梦想世界科举答案 dll注入器 ps魔棒快捷键 wps2012专业版 月之眼 h264是什么格式 dnf不知火刷图加点
当前位置: 首页 > 学习教程  > 

[js点击]JavaScript之原生触摸事件详解01

2020/10/16 18:03:55 文章标签: js原生点击事件

#触摸事件 ###1.触摸事件概念 该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。 ###2.触摸事件种类 具体来说有以下几个触摸事件。 1.touchstart 当手指放在屏幕上触发。 2.touchmove 当手指在屏幕上滑动时,连续地…

#触摸事件
###1.触摸事件概念
该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。
###2.触摸事件种类
具体来说有以下几个触摸事件。

1.touchstart
当手指放在屏幕上触发。
2.touchmove
当手指在屏幕上滑动时,连续地触发。
3.touchend
当手指从屏幕上离开时触发。
4.touchcancel
当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。

【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。

###3.触摸事件注意点

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动。

规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:

	1. touchenter:移动的手指进入一个DOM元素。
    2. toucheleave:移动手指离开一个DOM元素。
    3. touchcancel:触摸被中断(实现规范)。

#触摸事件相关的属性

1.三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

1. touchstart:手指放在一个DOM元素上。 
2. touchmove:手指拖曳一个DOM元素。
3. touchend:手指从一个DOM元素上移开。

2.每个触摸事件都包括了三个触摸列表:

  1. touches:当前位于屏幕上的所有手指的一个列表。

当一个手指在触屏上时,event.touches.length=1,
当两个手指在触屏上时,event.touches.length=2,以此类推。

  1. targetTouches:位于当前DOM元素上的手指的一个列表。
    >targetTouches:特定于事件目标的touch对象数组。
    因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

  2. changedTouches:涉及当前事件的手指的一个列表

    changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。
    例如,在一个touchend事件中,这就会是移开的手指。

  3. 这些列表由包含了触摸信息的对象组成:

          1. identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。
          2. target:DOM元素,是动作所针对的目标。
          3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
          4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。
    
  4. 每个touch对象都包含下列几个属性:

     	clientX:触摸目标在视口中的x坐标。
     	clientY:触摸目标在视口中的y坐标。
     	identifier:标识触摸的唯一ID。
     	pageX:触摸目标在页面中的x坐标。
     	pageY:触摸目标在页面中的y坐标。
     	screenX:触摸目标在屏幕中的x坐标。
     	screenY:触摸目标在屏幕中的y坐标。
     	target:触摸的DOM节点目标。
    

#触摸事件的使用

document.addEventListener('touchstart',function(e){
				var ev = e||event;
				console.log(ev.touches[0].clientX);
			});
document.addEventListener('touchmove',function(e){
				var ev = e||event;
				console.log(ev.touches[0].clientX);
			});			

#触摸事件的注意点

使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。

	event.touches[0]
	在touchend事件处理函数中,当该事件发生时,touches里面已经没有任何的
	touch对象了,此时,就要使用changeTouches集合	

#触摸事件的运用

	<div>
		触屏事件中,事件对象(e)包含了,类型均为TouchList[数组]	
		touches,手指按下屏幕的点的信息
		targetTouches,目标元素的所有当前触摸
		changedTouches,
		

	</div>
	<div id="block"></div> 
	<script type="text/javascript">
	var block = document.getElementById("block");
	block.addEventListener("touchstart",function(e){
		console.log(e);
		// var e = e || window.event;
		var touches = e.touches[0];
		var oLeft = touches.clientX - block.offsetLeft;
		var oTop = touches.clientY - block.offsetTop;

		block.addEventListener("touchmove",function(e) {
			var touches = e.touches[0];
			var bLeft = touches.clientX - oLeft;
			var bTop = touches.clientY - oTop;
			block.style.left = bLeft + "px";
			block.style.top = bTop + "px";
		},false)
	},false)


	// 为了避免移动端事件的默认行为对交互效果产生影响,建议阻止事件的默认行为,
	// 但这时不拖动div的时候默认事件也被取消了,解决方案,请看下一节
	document.addEventListener("touchmove",function(e){
		e.preventDefault();
	},false)
	</script>

下面请看touch.js事件介绍[js点击]JavaScript之触摸事件详解01


本文链接: http://www.dtmao.cc/news_show_300362.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?