一、触摸事件

ontouchstart
ontouchmove
ontouchend
ontouchcancel

目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：

touchstart → mouseover → mousemove → mousedown → mouseup → click1

~~触屏也支持mouseEvent?

/*** onTouchEvent*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0]; //~~~ e.touches触点对象数组
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX; //~~~ 触点相对浏览器窗口的坐标 e.clientX,e.clientY
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
e.preventDefault(); //~~~ e.preventDefault(); 阻止默认事件
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

三、重力感应

重力感应较简单，只需要为body节点添加onorientationchange事件即可。//~~ document.onorientationchange

在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下：
0：与页面首次加载时的方向一致  //~~~ window.orientation 获取手机的朝向  负值代表顺时针 正值代表逆时针
-90：相对原始方向顺时针转了90°
180：转了180°
90：逆时针转了90°

测试，Android2.1尚未支持重力感应。以上即目前的触屏事件，这些事件尚未并入标准，但已被广泛使用。未在其他环境下测试。

//以上为转载。下面是偶在做电子阅读的实例

1）随手指滑动，需要滑动的区域<div id="#roll" ontouchmove="tmove(event)"></div>

<script type="text/javascript">
var u = $('#roll');
function tmove(evet){
var touch = evet.touches[0]; //~~~ e.touches 和 e.changedTouches 一样吗？
var x = touch.clientX;
var y = touch.clientY;
var left = $("#roll").css("left");

$("#roll").animate({left:"-264px"},1000);

evet.preventDefault();
}

</script>

2)手指滑动离开后触发需要滑动的区域<div id="#roll" ontouchend="tend(event)" ontouchstart="tstart(event)"></div>

var down = 0;
 var up = 0;
 var index=0;
 var w = 64;
 function tstart(event)
 {
  down=event.changedTouches[0].pageX;//获取手指刚触摸时的x坐标  ~~相对页面的坐标
  }
 function tend(event)
 {
  up=event.changedTouches[0].pageX;//获取手指离开时的x坐标
  ul_obj = $("#roll");
  if(down>up)
   {//向左
   $("#roll").animate({left:(index+"px")},1000);
    index = index-64<=-180?-180:index-w;
   }
  else if(down<up)
   {//向右
    $("#roll").animate({left:((index+w)+"px")},1000);
    index = index+64>0?0:index+w;
  }
  }

3)还有就是电子书别的一些用到滴~帮助记忆~

3.1 ) 清空文本框:

$("input").attr("value","");

3.2 ) setIntervar(function（）{ }，1000) 设置自动轮播图

setInterval(function (){      
      if (i > $('.img ul li img').length - 2) 
       {
        i = 0;
       $('.dot a').removeClass('at').eq(i).addClass('at'); 
       }
      else{
      i++;
      $('.dot a').removeClass('at').eq(i).addClass('at');
    }
      $('.img ul').animate({left:-300*i},1000)

},2000);

3.3 ）setTimeout(function(){},1000) 设置一定时间后触发事件

setTimeout(function (){      
      $('#feedOk').hide();

$("#read a").html(“下载成功！”);
      document.location.href="index.html";
      },2000);

3.4）返回上一页

<a href="javascript:history.back()" class="back"></a>

//----------------------------------------------------------------------

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

1
2
3
4
touchstart:  // 手指放到屏幕上的时候触发
touchmove:  // 手指在屏幕上移动的时候触发
touchend:  // 手指从屏幕上拿起的时候触发
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详

在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新 的meego系统都模拟了类似的对象，这里只针对iOS，因为我只有iPad可用于测试。。）。这个对象封装一次 屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到 （一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：

1
2
3
4
client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：// 触摸点相对于屏幕的位置
identifier： // touch对象的unique ID

HTML主体定义

1
2
3
<body style=”height: 100%;margin:0;padding:0”>
<div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div>
</body>

转：触屏中的js事件的更多相关文章

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

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

  2. 移动端触屏滑动，JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  3. iphone、ipod Touch、ipad触屏时的js事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  4. 移动端触屏click点击事件延迟问题，以及tap的解决方案

    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...

  5. 手机中的js事件

    // 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触 ...

  6. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  7. Hammer.js——给bootstrap添加触屏功能

    Hammer.js qq群号(html5技术交流):158677025   手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 移 ...

  8. wex5 实战 手指触屏插件 hammer的集成与优劣

    前言 前几天,给客户做了一个图片点击放大,很简单,客户说能不能双手指缩放图片呢? 想到了hammer,不管好用不好用,总得试. 网上居然没有像样的中文文档和成熟案例,有的文写的鬼都看不懂.还是自已动手 ...

  9. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

随机推荐

  1. 标准C函数库的使用方法

    本篇介绍若干经常使用的标准C函数的使用方法,主要介绍stdio(标准输入输出).math(数字函数库).time(时间函数库).stdlib(标准函数库)string(标准字符串函数)等. 最后更新  ...

  2. openstack 源码分析

    Nova对于底层Hypervisor(如KVM/QEMU等)的调用与管理主要通过LibvirtDriver类,nova/virt/libvirt/driver.py Libvirt对Hyperviso ...

  3. curl向web服务器发送json数据

    c++使用libcurl: /* *g++ demo.cpp -g -Wall -lcurl */ #include <string.h> #include <stdlib.h> ...

  4. Libcurl安装及编译

    1.安装curl wget http://curl.haxx.se/download/curl-7.26.0.tar.gz tar -zxvf curl-7.26.0.tar.gz  cd curl- ...

  5. XML 文档解析操作

    sing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security; ...

  6. 读书笔记 SQL 事务理解

    事务的ACID属性 Atomicity 原子性 每个事务作为原子单元工作(即不可以再拆分),也就是说所有数据库变动事务,要么成功要么不成功. SQL Server把每个DML或者 DDL命令都当做一个 ...

  7. BZOJ 1003: [ZJOI2006]物流运输trans(最短路+dp)

    1A,爽! cost[i][j]表示从第i天到第j天不改路线所需的最小花费,这个可以用最短路预处理出.然后dp(i)=cost[j][i]+dp(j-1)+c. c为该路线的花费. --------- ...

  8. [LeetCode]题解（python）：070-Climbing Stairs

    题目来源: https://leetcode.com/problems/climbing-stairs/ 题意分析: 爬楼梯,一次可以爬一步或者两步.如果要爬n层,问一共有多少种爬法.比如说,如果是3 ...

  9. Linux必学的60个命令【转载】

    Linux提供了大量的命令,利用它可以有效地完成大量的工 作,如磁盘操作.文件存  [转载地址]http://blog.chinaunix.net/uid-16728139-id-3154272.ht ...

  10. Tensorflow 神经网络

    Tensorflow让神经网络自动创造音乐 前几天看到一个有意思的分享,大意是讲如何用Tensorflow教神经网络自动创造音乐.听起来好好玩有木有!作为一个Coldplay死忠粉,第一想法就是自动生 ...