js的touch事件的实际引用

 更新时间:2014年10月13日 16:56:34   投稿:whsnow  
研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐,而js只需几步简单定义即可,下面与大家分享下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节点坐标

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

相关文章

  • 如何判断Javascript对象是否存在的简单实例

    如何判断Javascript对象是否存在的简单实例

    下面小编就为大家带来一篇如何判断Javascript对象是否存在的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js实现mp3录音通过websocket实时传送+简易波形图效果

    js实现mp3录音通过websocket实时传送+简易波形图效果

    这篇文章主要介绍了js实现mp3录音通过websocket实时传送+简易波形图效果,本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS基础之逻辑结构与循环操作示例

    JS基础之逻辑结构与循环操作示例

    这篇文章主要介绍了JS基础之逻辑结构与循环操作,结合实例形式分析了JavaScript逻辑判断、流程控制、循环语句等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • JS数组转字符串实现方法解析

    JS数组转字符串实现方法解析

    这篇文章主要介绍了JS数组转字符串实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • uniapp实现上拉加载更多功能的全过程

    uniapp实现上拉加载更多功能的全过程

    我们在项目中经常使用到上拉加载更多,下面这篇文章主要给大家介绍了关于uniapp实现上拉加载更多功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • JS异步编程Promise对象详解

    JS异步编程Promise对象详解

    本文详细讲解了JS异步编程之Promise对象,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • js+html5实现可在手机上玩的拼图游戏

    js+html5实现可在手机上玩的拼图游戏

    这篇文章主要介绍了js+html5实现可在手机上玩的拼图游戏,涉及javascript结合html5进行图形操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 解决浏览器会自动填充密码的问题

    解决浏览器会自动填充密码的问题

    本篇文章主要介绍了解决浏览器会自动填充密码问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • 整理一下常见的IE错误

    整理一下常见的IE错误

    多年以来,IE一直都是最难于调试JavaScript 错误的浏览器。IE给出的错误消息一般很短又语焉不详。而且上下文信息也很少,有时甚至一点都没有。下面几小节将分别探讨一些在IE中难于调试的JavaScript 错误
    2016-11-11
  • JS实现自动变换的菜单效果代码

    JS实现自动变换的菜单效果代码

    这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论