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的更多相关文章

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

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

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

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

  3. HTML5的touch事件

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

  4. html5之touch事件

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

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

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

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

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

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

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

  8. Android Touch事件原理加实例分析

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

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

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

随机推荐

  1. matplotlib入门--1(条形图, 直方图, 盒须图, 饼图)

    作图首先要进行数据的输入,matplotlib包只提供作图相关功能,本身并没有数据读入.输出函数,针对各种试验或统计文本数据输入可以使用numpy提供的数据输入函数. # -*- coding: gb ...

  2. 希尔排序(Shell's Sort)的C语言实现

    原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia 希尔排序(Shell's Sort)又称“缩小增量排序”(Diminishing Incre ...

  3. HDU 2553 n皇后问题(回溯法)

     DFS Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description ...

  4. C#复习,输入学生信息排列成绩

    C#复习:在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1, ...

  5. Forms & HTML 组件 - laravelcollective/html

    简书链接 :Forms & HTML 组件 - laravelcollective/html 安装 方法一: composer require laravelcollective/html 方 ...

  6. java 代码格式(转)

    //转至博客:http://developer.51cto.com/art/201202/320317.ht /** * Java编码格式个人推荐,参考JDK源码和Hyperic HQ源码(原spri ...

  7. C++ Primer chap7

    /* 第七章7.1: */ //#include<iostream> //#include<string> //using std::cin; //using std::cou ...

  8. 让程序自动以管理员身份运行(用到了DuplicateToken,模拟管理员的身份,不可思议)

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  9. 【转】Android手机客户端关于二维码扫描的源码--不错

    原文网址:https://github.com/SkillCollege/QrCodeScan QrCodeScan 这是Android手机客户端关于二维码扫描的源码,使用了高效的ZBar解码库,并修 ...

  10. 【转】 Android 基于google Zxing实现对手机中的二维码进行扫描--不错

    原文网址:http://blog.csdn.net/xiaanming/article/details/14450809 转载请注明出处:http://blog.csdn.net/xiaanming/ ...