js的touch事件的实际引用-js教程-PHP中文网

js的touch事件的实际引用

PHPz

发布： 2016-05-16 16:34:11

原创

1876人浏览过

研究移动端页面的触屏滑动事件，搜索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的可以忽略之。

相应的事件有：

v3.5.1Piwik网站访问统计系统

Piwik是一套基于Php+MySQL技术构建的开源网站访问统计系统，前身是phpMyVisites。Piwik 网站统计系统可以给你详细的统计信息，比如网页浏览人数, 访问最多的页面, 搜索引擎关键词等等，并且采用了大量的AJAX/Flash技术，使得在操作上更加便易。此外，它还采用了插件扩展及开放API架构，可以让开发人员根据自已的实际需求创建更多的功能。

查看详情

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视频教程！