js的touch事件的实际引用

一开始做前端页面的时候，接触的也是js，但是随后便被简单高效的jquery吸引过去，并一直使用至今。

而js，则被我主观的认为底层技术而抛弃。

直到这几天工作需要，研究移动端页面的触屏滑动事件，搜索jquery 的相应技术支持实在繁琐（当然也可能是我对jquery的理解不够），而js只需几步简单定义即可。

由于对js的了解比较少，最简单的应用我都试了很久……下面就分享下js的touch事件的实际引用：

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

以上代码不可避免的使用了jquery的某些东西，不使用jquery的可以忽略之。

相应的事件有：

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

好吧，我其实也刚开始学，反正先把一些百度来的属性记下来再说。

赞 (0)

相关推荐

  • JS手机端touch事件计算滑动距离的方法示例

    本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar

  • 浅谈移动端之js touch事件 手势滑动事件

    现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

  • JS模仿手机端九宫格登录功能实现代码

    JS模仿手机端九宫格登录功能实现代码

    最近没有项目做,闲来无事写了一个小demo,特此分享到我们平台,供大家参考下,本文写的不好还请各位大侠见谅! 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: 首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致 第一个九宫格 $("#gesturepwd").GesturePasswd({ backgroundColor: "#25

  • js实现touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

  • javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

  • JS前端开发判断是否是手机端并跳转操作（小结）

    常用跳转代码 <script type="text/javascript"> // borwserRedirect (function browserRedirect(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'; var bIsIphone = sUserAgent.match(/iphone os/i) ==

  • javascript移动开发中touch触摸事件详解

    javascript移动开发中touch触摸事件详解

    事件对象是用来记录一些事件发生时的相关信息的对象.事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁! W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将事件对象作为window对象的一个属性(相当于全局变量) originalEvent对象 在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象.经查阅发现

  • 手机端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ 但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了. 打开photoswipe.js,大概在3179行有个关于tap的函数定义 在开头先定义一个变量 var tap_num = 0; 然后在onTapStart的定义里加入 //根据需求自己添加的S //判断

  • 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 复制代码 代码如下: $(function(){document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);} touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefault()可阻止滚动. to

  • 移动设备手势事件库Touch.js使用详解

    Touch.js手势库是专门在Webkit内核浏览器的移动设备中使用中设计的, Touch.js是移动设备上的手势识别与事件库.Touch.js基于原生事件,支持事件代理, 性能更好,极简的API,秒速上手等优势. 1.旋转事件- startRotate var angle = 0; touch.on('#target', 'touchstart', function(ev){ ev.startRotate(); ev.preventDefault(); }); touch.on('#targe

随机推荐