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节点坐标

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

相关文章

  • JS获取及验证开始结束日期的方法

    JS获取及验证开始结束日期的方法

    这篇文章主要介绍了JS获取及验证开始结束日期的方法.涉及javascript针对日期的获取、比较及判断等技巧,需要的朋友可以参考下
    2016-08-08
  • 详解用Webpack与Babel配置ES6开发环境

    详解用Webpack与Babel配置ES6开发环境

    这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript实现经典排序算法之插入排序

    JavaScript实现经典排序算法之插入排序

    这篇文章主要为大家详细介绍了JavaScript实现经典排序算法之插入排序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币表达式的js函数

    将数字转换成大写的人民币,方法有很多,本例介绍的是使用js来完成的,有需要的朋友可以参考下
    2014-09-09
  • 小程序指纹验证的实现代码

    小程序指纹验证的实现代码

    这篇文章主要介绍了小程序指纹验证的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • javascript 日期工具汇总

    javascript 日期工具汇总

    这篇文章主要为大家详细介绍了javaScript日期工具类的汇总,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • javascript编程开发中取色器及封装$函数用法示例

    javascript编程开发中取色器及封装$函数用法示例

    这篇文章主要介绍了javascript编程开发中取色器及封装$函数,结合实例形式分析了javascript封装$函数及数值运算、页面元素动态操作实现取色器功能相关技巧,需要的朋友可以参考下
    2017-08-08
  • Cookie 注入是怎样产生的

    Cookie 注入是怎样产生的

    现在很多网站都加了防注入系统代码,你输入注入语句将无法注入~~感觉这样的防注入系统不错,但防注入系统没有注意到 Cookies 的问题!所以就有了Cookies注入~~
    2009-04-04
  • 利用原生js模拟直播弹幕滚动效果

    利用原生js模拟直播弹幕滚动效果

    弹幕是一个很常见的功能,这篇文章主要给大家介绍了关于如何利用原生js模拟直播弹幕滚动效果的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • JavaScript 浮动定位提示效果实现代码

    JavaScript 浮动定位提示效果实现代码

    本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。
    2009-09-09

最新评论