当前位置:首页 > 资讯 > info6 > 正文

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

发表于: 2016-11-20   作者:BaiHuaXiu123   来源:转载   浏览:
摘要: 触摸事件1.触摸事件概念该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。 2.触摸事件种类具体来说有以下几个触摸事件。1.touchstart 当手指放在屏幕上触发。 2.touchmove 当手指在屏幕上滑动时,连续地触发。 3.touchend 当手指从屏幕上离开时触发。 4.touchcancel 当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。 【总

触摸事件

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,以此类推。

2) targetTouches:位于当前DOM元素上的手指的一个列表。

targetTouches:特定于事件目标的touch对象数组。
因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

3) changedTouches:涉及当前事件的手指的一个列表

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

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

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

5) 每个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

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

编辑推荐
DOM0事件模型 事件模型在不断发展,早期的事件模型称为DOM0级别。 DOM0事件模型,所有的浏览器都支
编者按:InfoQ开设新栏目“品味书香”, 精选技术书籍的精彩章节,以及分享看完书留下的思考和收获
现在的应用中大都支持触摸操作,如果应用中加入触摸事件会提高用户体验性。今天我们就来学习ios下触
编者按:InfoQ开设新栏目“品味书香”, 精选技术书籍的精彩章节,以及分享看完书留下的思考和收获
javascript原生的事件,总结了一下,包括事件流、处理函数、事件对象这几样东西。而在兼容性方面,
 android触碰消息传递机制 用户的每次触碰(onClick,onLongClick,onScroll,etc.)都是由一个ACT
android触碰消息传递机制 用户的每次触碰(onClick,onLongClick,onScroll,etc.)都是由一个ACTION_D
一、iOS事件 1.事件:当我们在手机上点击手机屏幕、滑动手机翻页、摇动手机的时候,手机会做出一些
一.事件传播机制   客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型。当文档、
1.触摸事件的相关方法: ViewGroup: •dispatchTouchEvent(MotionEvent) 用于分发touch事件 •onIn
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号