一开始做前端页面的时候，接触的也是js，但是随后便被简单高效的jquery吸引过去，并一直使用至今。

而js，则被我主观的认为底层技术而抛弃。

直到这几天工作需要，研究移动端页面的触屏滑动事件，搜索jquery 的相应技术支持实在繁琐（当然也可能是我对jquery的理解不够），而js只需几步简单定义即可。

由于对js的了解比较少，最简单的应用我都试了很久……下面就分享下js的touch事件的实际应用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6.     <title>js的touch事件的实际应用_何问起</title>
  7.     <base target="_blank" />
  8.     <meta charset="utf-8" />
  9.     <style>
  10.         a{color:blue;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>
  15.         请在手机等触屏设备访问本页，然后拖动本页。拖动本页会弹出对话框。
  16.  
  17.         <br />
  18.         <a href="http://hovertree.com">何问起</a>
  19.         <a href="http://hovertree.com/menu/texiao/">网页特效</a>
  20.         <a href="http://hovertree.com/h/bjaf/iw48pw0n.htm">代码说明</a>
  21.        <br />
  22.         <img src="http://hovertree.com/hvtimg/bjafjf/q4joew9u.png" alt="二维码" />
  23.     </div>
  24.  
  25.     <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>
  26.  
  27.     <script>
  28.         $(function () {
  29.             document.addEventListener("touchmove", _touch, false);
  30.         })
  31.  
  32.         function _touch(event) {
  33.             alert("何问起");
  34.         }</script>
  35. </body>
  36. </html>

效果展示 http://hovertree.com/texiao/mobile/11/

手机扫描下面二维码体验效果：

以上代码不可避免的使用了jquery的某些东西，不使用jquery的可以忽略之。
相应的事件有：
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

http://hovertree.com/h/bjaf/iw48pw0n.htm

推荐：http://hovertree.com/h/bjaf/vvxsmuh4.htm

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

js的touch事件的实际引用的更多相关文章

  1. js的Touch事件

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

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

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

  3. zepto.js 处理Touch事件（实例）

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

  4. zepto.js 处理Touch事件

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

  5. JS模拟Touch事件

    var ele = document.getElementsByClassName('target_node_class')[0] //may have x and y properties in s ...

  6. js 用touch事件实现简单tap

    function _tap(dom,callBack){ var startTime=0; var delayTime=200; var isMove=false; dom.addEventListe ...

  7. 关于js touch事件 的引用设置

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

  8. touch事件应用

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

  9. 浅谈javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...

随机推荐

  1. Go语言实战 - revel框架教程之MongDB的最佳搭档revmgo

    由于revel框架本身对于model层的编写没有提供任何指导,所以在设计这部分的时候就有些犹豫,反复斟酌到底怎样才算是最佳实践. 我在做山坡网的时候刚开始也纠结了一下,拿不准mongodb的sessi ...

  2. Redis应用场景一

    Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象构建不同的 ...

  3. DataTable转Entity(Emit版)

    public static List<T> ToList<T>(DataTable dt)        {            List<T> list = n ...

  4. Sublime Text3 Package Control 在菜单栏中不显示

    前言 最近由于在 Sublime Text3 下配置了React 开发环境,最近也更新了Sublime Text3 的版本,由此装上了很多的插件.今天打开Sublime 想要通过 `Package C ...

  5. iOS-常用的第三方框架的介绍

    写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上. GitHub 里面有大量优秀的第三方框架,而且 License 对商业很友好.一下摘录一下几乎每 ...

  6. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  7. 推荐12个漂亮的 CSS3 按钮实现方案

    在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...

  8. Visualize Surface by Delaunay Triangulator

    Visualize Surface by Delaunay Triangulator eryar@163.com Abstract. Delaunay Triangulation is the cor ...

  9. XSD文件生成C#VO实体类

    最近公司要做一个项目,需要和现有的其他项目对接,由于不知道他们的数据库,只有XSD文件.所以,我们在修改相应的程序时,就需要根据他们提供的XSD文件,来写我们的VO实体类,由于我写过根据Oracle数 ...

  10. 【转】WPF DataGrid 获取选中的当前行某列值

    方法一:DataRowView mySelectedElement = (DataRowView)dataGrid1.SelectedItem; string result = mySelectedE ...