<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>touchmove</title>

<style>

#tm{

    position: absolute;

    top: 100px;

    left: 100px;

    width: 100px;

    height: 30px;

    background-color: blue;

    text-align: center;

    line-height: 30px;

    color: white;

}

</style>

</head>

<body>

<div id="tm">touchmove</div>

<script>

var obj = document.getElementById('tm');

obj.addEventListener('touchstart', function(event){

    obj.style.backgroundColor = 'red';

});

obj.addEventListener('touchend', function(event){

    obj.style.backgroundColor = 'blue';

    obj.innerHTML = 'touchmove';

});

obj.addEventListener('touchmove', function(event) {

    event.preventDefault();

    var touch = event.targetTouches[0];

    obj.style.left = touch.pageX-50 + 'px';

    obj.style.top = touch.pageY-50 + 'px';

    obj.innerHTML = 'x:' + touch.pageX + ', y:' + touch.pageY;

}, false);

</script>

</body>

</html>

移动开发学习touchmove的更多相关文章

  1. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

  4. NET开发学习项目资源（2）

    NET开发学习项目资源 击标题链接即可下载. 目录: 1.征婚交友网站 前台交友信息和后台会员管理两大部分组成. 前台功能模块 该模块主要包括查询交友信息.显示交友信息.会员登录.会员信息管理.修改会 ...

  5. Civil 3D API二次开发学习指南

    Civil 3D构建于AutoCAD 和 Map 3D之上,在学习Civil 3D API二次开发之前,您至少需要了解AutoCAD API的二次开发,你可以参考AutoCAD .NET API二次开 ...

  6. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. .net 网站开发学习资源

    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...

  9. 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址

    驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...

随机推荐

  1. jenkin 不必要的Execute shell执行失败，导致jenkins都失败的解决

    问题:jenkins里配置了多个执行shell,且有后续的执行job任务.但其中一个Execute shell执行失败了导致后续的shell都不执行了 而这个失败的shell并不是一定要执行   解决 ...

  2. ext.js的目录结构的简单解释

    adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库.    build: 压缩后的ext全部源码(里面分类存放).    docs: API帮助文档.    ...

  3. 今天设置apache二级域名ssl证书后出现问题

    用集成环境 phpwamp重启服务失败,但是重启电脑后apache就启动成功,也不知道哪里原因,待以后解决.

  4. Mysql 索引与Key

    如果只是key的话,就是普通索引. mysql的key和index多少有点令人迷惑,单独的key和其它关键词结合的key(primary key)实际表示的意义是不同,这实际上考察对数据库体系结构的了 ...

  5. anaconda的安装tensorflow

    在anaconda prompt中我们输入 anaconda search -t conda tensorflow 查看能在哪里安装tensorflow anaconda show dhirschfe ...

  6. 微信小程序开发——导航失效的解决办法

    异常描述: 使用 navigator 导航,各种属性配置没问题,就是点击死活不跳转. 异常分析: 遇到这种情况,要先考虑的就是当前配置的导航url,是不是已经使用在tabBar中,因为小程序对于nav ...

  7. 最小生成树kruskal模板

    算法思路:每次选取权值最小的边,判断这两个点是否在同一个集合内,如果在则跳过,如果不在则加上这条边的权值 可以使用并查集储存结点,可以快速判断结点是否在同一集合内. #include<iostr ...

  8. [leetcode]252. Meeting Rooms会议室有冲突吗

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  9. Flex 布局排版总结

    1.display: flex / inline-flex; flex:  作为弹性盒自适应屏幕 inline-flex:作为弹性盒自适应当前块级元素所包含的子级块 例:flex,子级块宽度自动相加, ...

  10. Android的事件分发机制

    public boolean dispatchTouchEvent(MotionEvent event) 通过方法名我们不难猜测,它就是事件分发的重要方法.那么很明显,如果一个MotionEvent传 ...