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 smipleChart 简单图标类

    javascript smipleChart 简单图标类

    支持 线性图 区域图 柱状图 饼图 支持多浏览器 用到的是svg vml 之后加上 多层饼图 分段图 和组合图
    2011-01-01
  • xmlplus组件设计系列之路由(ViewStack)(7)

    xmlplus组件设计系列之路由(ViewStack)(7)

    xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之路由,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序:数据存储、传值、取值详解

    微信小程序:数据存储、传值、取值详解

    这篇文章主要介绍了微信小程序:数据存储、传值、取值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 纯javaScript、jQuery实现个性化图片轮播【推荐】

    纯javaScript、jQuery实现个性化图片轮播【推荐】

    本文主要介绍了纯javaScript、jQuery实现个性化图片轮播的方法,并在文章结尾附上源码下载。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js导出excel文件的简洁方法(推荐)

    js导出excel文件的简洁方法(推荐)

    下面小编就为带来一篇js导出excel文件的简洁方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • React+TypeScript+webpack4多入口配置详解

    React+TypeScript+webpack4多入口配置详解

    这篇文章主要介绍了React+TypeScript+webpack4多入口配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 用javascript做拖动布局的思路

    用javascript做拖动布局的思路

    这几天不是很忙,就找了些拖动布局方面的资料看看,也学着写了个拖动布局的效果,没想到花了好多时间,七拼八凑,总算是把这个效果写出来了。
    2010-10-10
  • JS中精巧的自动柯里化实现方法

    JS中精巧的自动柯里化实现方法

    给大家详细分析了JS中精巧的自动柯里化实现方法并通过代码实例分析了过程和原理,参考学习下吧。
    2017-12-12
  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    这篇文章主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,非常美观大方,需要的朋友可以参考下
    2015-08-08
  • 如何在项目中使用log4.js的方法步骤

    如何在项目中使用log4.js的方法步骤

    这篇文章主要介绍了如何在项目中使用log4.js的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07

最新评论