html 触摸屏页面,HTML5触摸屏touch事件使用实例1

1.源码：

.divFixed {

width: 100px;

height: 100px;

font-size: 15px;

text-align: center;

border: 2px solid red;

position: fixed;

}

var divOne = document.getElementById('divOne');

var isMove = false;

var oldX = oldY = 0;

divOne.addEventListener('touchstart', function (e) {

if (e.targetTouches.length == 1) {

var touch = e.targetTouches[0];

isMove = true;

oldX = touch.pageX;

oldY = touch.pageY;

divOne.style.background = "gray";

}

}, false);

divOne.addEventListener('touchmove', function (e) {

if (e.targetTouches.length == 1) {

var touch = e.targetTouches[0];

if (isMove) {

var curX = touch.pageX;

var curY = touch.pageY;

divOne.style.left = divOne.offsetLeft + (curX - oldX) + 'px';

divOne.style.top = divOne.offsetTop + (curY - oldY) + 'px';

oldX = curX;

oldY = curY;

}

}

//禁用默认操作

e.preventDefault();

});

divOne.addEventListener('touchend', function (e) {

if (e.changedTouches.length == 1) {

var touch = e.changedTouches[0];

isMove = false;

oldX = oldY = 0;

divOne.style.background = "transparent";

}

}, false);

//禁止整个页面触屏，而移动(如：QQ浏览器的页面左右切换)

window.addEventListener('touchmove', function (e) {

e.preventDefault();

}, false);

2.显示结果：

HTML5触摸屏touch事件使用介绍1

市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可 ...

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

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

HTML5的touch事件

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

html5之touch事件

前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互 ...

html5 touch事件实现触屏页面上下滑动(二)

五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

html5 touch事件实现触屏页面上下滑动(一)

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...

Android Touch事件原理加实例分析

Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. ...

javascript——touch事件介绍与实例演示

分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...

随机推荐

map erase iterator

错误写法: map m; for (map::iterator it = m.begin(); it != m.end(); it++) ...

ubuntu 15.04 联网提示:wifi已通过硬件开关禁用

执行以下命令: echo "options asus_nb_wmi wapf=4"| sudo tee /etc/modprobe.d/asus_nb_wmi.conf 重启

用Navicat连接Oracle数据库时报错ORA-28547:connection to server failed,probable Oracle Net admin error

用Navicat连接Oracle数据库时出现如下错误 上网一查原来是oci.dll版本不对.因为Navicat是通过Oracle客户端连接Oracle服务器的,Oracle的客户端分为两种,一种是标准 ...

微信公众平台开发(免费云BAE+高效优雅的Python+网站开放的API)

虽然校园App是个我认为的绝对的好主意,但最近有个也不错的营销+开发的模式出现:微信平台+固定域名服务器. 微信公众平台的运行模式不外两个: 一.机器人模式或称转发模式,将说话内容转发到服务器上完成, ...

javascripte (三) 改变html图像

Spring源深和六系列 CreateBean过程

blog宗旨:用图说话. 这一章的图讲述了createBean的过程.到这里spring容器就能够完毕IOC的整个过程,拿到我们须要的对象. 下一章我们接着来看一看AOP完毕的过程. 附:文件夹 Sp ...

01--css编码技巧--css揭秘

一 尽量减少代码重复 1.按钮 #btn { padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradie ...

python3图像识别库安装与使用

pytesseract库的安装 因为用的win10,就直说windows上面的安装了.其实就是pip安装就完事了. $ pip install pytesseract 安装了这个还不算完,得安装Tes ...

Java中类的线程安全问题

java中各种集合(字符串类)的线程安全性!!! 一.概念: 线程安全:就是当多线程访问时,采用了加锁的机制:即当一个线程访问该类的某个数据时,会对这个数据进行保护,其他线程不能对其访问,直到该线程读 ...

XSL自定义函数

利用微软的XSL的继承特性,用户可以自定义XSL函数.基本原理是用户写的脚本代码写在msxsl中,并设置这部分msxsl继承到用户自定义空间中,那么用户就可以通过用户自定义空间使用msxsl中的脚本代 ...