JS触摸事件

JavaScript013

JS触摸事件,第1张

在头部加上这个，防止双击的时候浏览器放大

当手指放在屏幕上触发。

当手指在屏幕上滑动时，连续地触发。

当手指从屏幕上离开时触发。

当系统停止跟踪时触发，系统什么时候取消，

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

，来阻止屏幕的默认滚动。

touches：表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时，event.touches.length=1,

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

targetTouches：特定于事件目标的touch对象数组。

因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性：

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触摸的DOM节点目标。

一、鼠标事件

onmousedown事件，当鼠标左键按下时触发。 如：当鼠标元素boxq1上按下时，改变它的背景颜色。

varbox1 = document.getElementById("box1")box1.onmousedown=function(){ box1.style.backgroundColor= 'green'}

2. onmouseup事件，当鼠标左键抬起时触发。如：鼠标按下之前元素box1背景颜色为红色，当按下之后变为绿色，放开之后又变为红色。

varbox1 = document.getElementById("box1")box1.onmousedown=function(){ box1.style.backgroundColor= 'green'}box1.onmouseup=function(){ box1.style.backgroundColor= 'red'}

3. onmousemove事件，当鼠标在元素上移动时触发。如：鼠标在元素box1上移动时，控制台输出鼠标的位置。

box1.onmousemove =function(e){varx =e.pageXvary =e.pageYconsole.log('鼠标横坐标为：'+x+'******鼠标纵坐标为：'+y)}

4. onmouseenter事件，当鼠标进入元素的瞬间触发，仅在鼠标进入元素时触发。如：鼠标在进入元素box1时，元素背景颜色改为绿色。

它与onmousedown事件区别在于：后者是再按下的瞬间触发，而前者是在进入元素瞬间才触发，也就是说鼠标在元素边界上才触发。

varbox1 = document.getElementById("box1")box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'}

5. onmouseleave事件，当鼠标移出元素的瞬间触发，仅在鼠标移出元素时触发，发生在元素边界。如：鼠标在进入元素box1时，背景颜色改为绿色，移出元素后又变为红色。

varbox1 = document.getElementById("box1")box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'}box1.onmouseleave=function(){ box1.style.backgroundColor= 'red'}

6. onmouseover事件，当鼠标在元素之上的时候触发，只要鼠标留在元素之上就会触发，仅触发一次，不管鼠标是否移动，这是它和onmousemove的区别。如：鼠标在元素box1上时一直在控制台输入数字一。

box1.onmouseover =function(){ console.log(newDate())}

7. onmouseout事件，当鼠标离开目标元素是触发，效果和原理与mouseleave没有什么区别，只是在Firefox下没有onmouseenter和onmouseleave，只能使用onmouseover和onmouseout；而在IE中便可使用onmouseennter和onmouseleave来代替前两个。

二、手机触摸事件

1. ontouchstart事件，触摸开始事件，当手机屏幕被触摸的瞬间触发。如：当触摸手机的瞬间输出当前触摸的位置坐标。

varbox1 = document.getElementById("box1")box1.ontouchstart=function(e){vartouch = e.touches[0]varx =Number(touch.clientX)vary =Number(touch.clientY)console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y)}

2. ontouchmove事件，触摸的整个过程触发，当手指在屏幕上移动的时候触发。如：当手指在屏幕上移动的时候获取当前触摸位置。

varbox1 = document.getElementById("box1")box1.ontouchmove=function(e){vartouch = e.touches[0]varx =Number(touch.clientX)vary =Number(touch.clientY)console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y)}

3. ontouchend事件，触摸结束的瞬间触发，即当手指离开屏幕时触发。如：当手指离开屏幕时，改变元素的背景颜色。

varbox1 = document.getElementById("box1")box1.ontouchstart=function(e){vartouch = e.touches[0]box1.style.backgroundColor= 'green'}

4. ontouchcancel事件，触摸过程被系统取消时触发，当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。