转:触屏中的js事件
一、触摸事件
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事件的更多相关文章
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- 移动端触屏滑动,JS事件
先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...
- iphone、ipod Touch、ipad触屏时的js事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- 移动端触屏click点击事件延迟问题,以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- 手机中的js事件
// 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel // 触 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- Hammer.js——给bootstrap添加触屏功能
Hammer.js qq群号(html5技术交流):158677025 手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 移 ...
- wex5 实战 手指触屏插件 hammer的集成与优劣
前言 前几天,给客户做了一个图片点击放大,很简单,客户说能不能双手指缩放图片呢? 想到了hammer,不管好用不好用,总得试. 网上居然没有像样的中文文档和成熟案例,有的文写的鬼都看不懂.还是自已动手 ...
- js touch触屏原理分析
之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...
随机推荐
- ubuntu 常用生产环境部署配置测试调优
1,ubuntu monogdb 安装配置 2,ubuntu jdk1.7,tomcat7安装 3,ubuntu LAMP部署 4,mongodb 远程热备份及恢复 使用自带的mongodump和mo ...
- 收藏:左路Deep Learning+右路Knowledge Graph,谷歌引爆大数据
发表于2013-01-18 11:35| 8827次阅读| 来源sina微博 条评论| 作者邓侃 数据分析智能算法机器学习大数据Google 摘要:文章来自邓侃的博客.数据革命迫在眉睫. 各大公司重兵 ...
- c++程序内存泄露检測工具
功能: 用于检測c++程序的内存泄露. 原理: 事实上非常easy,就是通过函数的重载机制,捕获应用程序的new, new[] , delete , delete[], malloc,calloc,f ...
- Webserver管理系列:9、创password重设盘
网络时代需要记录password太多.一不留神可能会忘记.是否server的password忘记将是一件非常麻烦的事情. Windows Server 2008 它为我们创造password重设盘功能 ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- 1.2. chromium源代码分析 - chromiumframe - 入口函数
ChromiumFrame的入口函数在main.cpp中,打开main.cpp.中包含3个类和_tWinMain函数._tWinMain就是我们要找的入口函数.我做了部分注释: int APIENTR ...
- HDU1171-Big Event in HDU
描述: Nowadays, we all know that Computer College is the biggest department in HDU. But, maybe you don ...
- php基础知识(有代码有注释)
回顾 数组: 数据的组合 数组定义: 三种方式(常用array()) 数组访问: 下标 数组分类: 关联数组, 索引数组和混合数组 数组循环遍历: foreach遍历(foreach原理) 二维数组: ...
- 高性能javascript 学习笔记(1)
加载和运行 管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的 ...
- Android Launcher label和Main Activity保持不一致
最近在开发一个库存管理的App,AndroidMainifest.xml中是这样设定的: <application android:allowBackup="true" an ...