一开始做前端页面的时候,接触的也是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 touch事件 的引用设置的更多相关文章

  1. js Touch事件(向左滑动,后退)

    js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...

  2. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  3. Android基于mAppWidget实现手绘地图(九)–如何处理地图对象的touch事件

    为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...

  4. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  7. js的Touch事件

    js的touch事件,一般用于移动端的触屏滑动$(function(){document.addEventListener("touchmove", _touch, false); ...

  8. zepto.js 处理Touch事件(实例)

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  9. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

随机推荐

  1. [原创]CI持续集成系统环境---部署gerrit环境完整记录

    开发同事提议在线上部署一套gerrit代码审核环境,不用多说,下面就是自己部署gerrit的操作记录. 提前安装好java环境,mysql环境,nginx环境 测试系统:centos6.5 下载下面三 ...

  2. Ruby零星笔记

    chomp:去掉字符串末尾的\n或\r chop:去掉字符串末尾的最后一个字符,不管是\n\r还是普通字符 to_s:转换成字符串 to_i:转换成数值 object.nil?:判断是否为空,空返回: ...

  3. 移动表格行 解决低版本IE fadeIn fadeOut 失效问题

    在维护一个内部使用的web工具的时候,需要在表格里配置参数,并且支持参数列的上下移动,有jQuery-UI工具支持对表格列的拖动,但是此处不追求效果,而且旧系统页面兼容性很差,无奈只能做上下移动的按钮 ...

  4. NPOI操作excel之读取excel数据

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.  一.下载引用 去NPOI官网http://npoi.codeplex. ...

  5. Unit06 - 抽象类、接口和内部类(下) 、 面向对象汇总

    Unit06 - 抽象类.接口和内部类(下) . 面向对象汇总 1.多态:  1)意义:    1.1)同一类型的引用指向不同的对象时,有不同的实现        行为的多态:cut().run(). ...

  6. IEnumerable和IEnumerator

    概述 IEnumerable和IEnumerator接口存在的意义:用来实现迭代的功能! public interface IEnumerable { IEnumerator GetEnumerato ...

  7. linux查看是否被入侵

    一.检查系统日志 lastb命令检查系统错误登陆日志,统计IP重试次数 二.检查系统用户 1.cat /etc/passwd查看是否有异常的系统用户 2.grep “0” /etc/passwd查看是 ...

  8. spark的安装

    官方安装地址:http://spark.apache.org/docs/latest/spark-standalone.html 准备 1.三台机器(m2.m3.m4) 2.m2位master, m3 ...

  9. windows下nginx+php简单配置

    Nginx+php运行环境搭建 虽然目前nginx使用很广泛,在大陆主流的互联网站点或多或少会用到这个俄国人开发的小应用(占用资源小).但是我这个土鳖还是第一次自己独立配置,网上资料不少,但是还是遇到 ...

  10. 《30天自制操作系统》12_day_学习笔记

    harib09a: 定时器:(Timer)每隔一段时间,会向CPU发送一个中断.这样CPU不用记住每一条指令的执行时间.没有定时器很多指令CPU都很难执行.例如HLT指令,这个指令的执行时间不是个固定 ...