HTML5触摸屏touch事件使用实例1
1.源码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <style>
.divFixed {
width: 100px;
height: 100px;
font-size: 15px;
text-align: center;
border: 2px solid red;
position: fixed;
}
</style>
<div class="divFixed" id="divOne"></div>
<script>
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);
</script>
2.显示结果:
HTML5触摸屏touch事件使用实例1的更多相关文章
- 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 前言 诸如智能手机和平板 ...
随机推荐
- matplotlib入门--1(条形图, 直方图, 盒须图, 饼图)
作图首先要进行数据的输入,matplotlib包只提供作图相关功能,本身并没有数据读入.输出函数,针对各种试验或统计文本数据输入可以使用numpy提供的数据输入函数. # -*- coding: gb ...
- 希尔排序(Shell's Sort)的C语言实现
原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia 希尔排序(Shell's Sort)又称“缩小增量排序”(Diminishing Incre ...
- HDU 2553 n皇后问题(回溯法)
DFS Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description ...
- C#复习,输入学生信息排列成绩
C#复习:在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1, ...
- Forms & HTML 组件 - laravelcollective/html
简书链接 :Forms & HTML 组件 - laravelcollective/html 安装 方法一: composer require laravelcollective/html 方 ...
- java 代码格式(转)
//转至博客:http://developer.51cto.com/art/201202/320317.ht /** * Java编码格式个人推荐,参考JDK源码和Hyperic HQ源码(原spri ...
- C++ Primer chap7
/* 第七章7.1: */ //#include<iostream> //#include<string> //using std::cin; //using std::cou ...
- 让程序自动以管理员身份运行(用到了DuplicateToken,模拟管理员的身份,不可思议)
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...
- 【转】Android手机客户端关于二维码扫描的源码--不错
原文网址:https://github.com/SkillCollege/QrCodeScan QrCodeScan 这是Android手机客户端关于二维码扫描的源码,使用了高效的ZBar解码库,并修 ...
- 【转】 Android 基于google Zxing实现对手机中的二维码进行扫描--不错
原文网址:http://blog.csdn.net/xiaanming/article/details/14450809 转载请注明出处:http://blog.csdn.net/xiaanming/ ...