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

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

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

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

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>js的touch事件的实际应用_何问起</title>

    <base target="_blank" />

    <meta charset="utf-8" />

    <style>

        a{color:blue;}

    </style>

</head>

<body>

    <div>

        请在手机等触屏设备访问本页，然后拖动本页。拖动本页会弹出对话框。

        <br />

        <a href="http://hovertree.com">何问起</a>

        <a href="http://hovertree.com/menu/texiao/">网页特效</a>

        <a href="http://hovertree.com/h/bjaf/iw48pw0n.htm">代码说明</a>

       <br />

        <img src="http://hovertree.com/hvtimg/bjafjf/q4joew9u.png" alt="二维码" />

    </div>

    <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>

    <script>

        $(function () {

            document.addEventListener("touchmove", _touch, false);

        })

        function _touch(event) {

            alert("何问起");

        }</script>

</body>

</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. Linux环境下部署完JDK后运行一个简单的Java程序

    前言 前一篇文章详细讲解了如何在Windows环境下安装虚拟机+Linux系统,并且成功部署了JDK. 不过部署完JDK之后,我们判断部署是否成功的依据是看"java -version&qu ...

  2. nodejs事件轮询详述

    目录 概述 nodejs特点 事件轮询 关于异步方法 概述 关于nodejs的介绍网上资料非常多,最近由于在整理一些函数式编程的资料时,多次遇到nodejs有关的内容.所以就打算专门写一篇文章总结一下 ...

  3. Win7&Ubuntu12.04 双系统引导问题

    周末的时候手贱,重装系统,导致原来的ubuntu12.04和win7双系统的引导不见了,所以在此进行一下说明,如何修复. 1. win7和ubuntu12.04双系统引导修复 问题描述:    在重装 ...

  4. 每天一个linux命令(25)：linux文件属性详解

    Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: 命令: ls -lih 输出: [root@loca ...

  5. Oracle 多行转多列,列值转为列名

    前段时间做调查问卷,客户创建自定义问卷内容,包括题目和选项内容; 之后需要导出问卷明细,,,,麻烦来咯 于是到网上到处搜索,没有直接结果;于是又找各种相似的,,终于功夫不负有心人 然后最终自己写出来了 ...

  6. JavaScript必须了解的知识点总结。

    整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...

  7. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  8. Utility1：Overview

    Utility 是利用,使用的意思,utilization是指使用效率,利用率的意思. SQL Sever 内置 Utility Feature,便于集中监控Server关键资源(CPU和Disk)的 ...

  9. .NET平台开源项目速览(10)FluentValidation验证组件深入使用(二)

    在上一篇文章:.NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一) 中,给大家初步介绍了一下FluentValidation验证组件的使用情况.文章从构建间的验证器开 ...

  10. Create Volume 操作（Part III） - 每天5分钟玩转 OpenStack（52）

    本节是创建 Volume 的第三部分,也是最后一部分:cinder-volume 的处理过程. 第一部分和第二部分可以参考前面两个小节.cinder-volume 通过 driver 创建 volum ...