HTML5学习生涯1--touchmove中遇到的问题
在使用html5做在手机上显示轮播图片的效果时突然遇到touchmove事件在touchstart事件之后只触发了一次touchmove之后和touchend一起触发了一次,咦,这是怎么回事?怎么不和mousemove一个道理呢,最后查了查资料是因为没设置事件阻止引起的
//绑定事件
function bindEvent() {
document.getElementById("divid").addEventListener('touchstart', touchSatrtFunc,false);
document.getElementById("divid").addEventListener('touchmove', touchMoveFunc,false);
document.getElementById("divid").addEventListener('touchend', touchEndFunc,false);
}
function touchSatrtFunc(evt)
{
var e = evt.touches[];
}
function touchMoveFunc(evt)
{
var e = evt.touches[];
clientX_start = e.screenX;
evt.preventDefault();//就是这句
}
function touchEndFunc(evt)
{
}
touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发
//返回的参数
client / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX /screenY:// 触摸点相对于屏幕的位置
identifier: // touch对象的unique ID
HTML5学习生涯1--touchmove中遇到的问题的更多相关文章
- html和html5学习
html和html5学习 chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性 input的type属性 ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5 学习笔记--------》HTML5概要与新增标签!
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习笔记(一):HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- HTML5学习参考资料整理
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
随机推荐
- 黑科技项目:英雄无敌III Mod <<Fallen Angel>>介绍
英雄无敌三简介(Heroes of Might and Magic III) 英3是1999年由New World Computing在Windows平台上开发的回合制策略魔幻游戏,其出版商是3DO. ...
- Flask备注三(Context)
Flask备注三(Context) Flask支持不同的应用场景下,对应不同的local context(本地上下文环境),用来提供当前环境下的资源.lcoal context和全局变量以及局部变量最 ...
- SQLYog快捷键大全
Ctrl+M 创建一个新的连接 Ctrl+N 使用当前设置新建连接 Ctrl+F4 断开当前连接 对象浏览器 F5 刷新对象浏览器(默认) Ctrl+B 设置焦点于对象浏览器 SQ ...
- js--webSocket入门
Websocket 1.websocket是什么? WebSocket是为解决客户端与服务端实时通信而产生的技术.其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接, 此 ...
- Openfire 集群探究_压测情况
一.(测试时间:20151220 - 下午14:00-17:00) windows环境 第一次测试,运行中发现在eclipse环境下.4w个连接耗尽了约1G的内存. 另外:服务本来可用的,压测客户端强 ...
- onethink和thinkphp3.2学习
thinkphp发布3.2版本之后,也发布了一个简单的内容管理系统onthink,这样有助于理解thinkphp3.2的使用: 一.首先最关键的一点是thinkphp3.2中加入了命名空间的使用 什么 ...
- Linux的学习之路
linux的安装配置.常用命令: 基本上学习任务: 1.在VMware(9)虚拟机上安装Linux操作系统(安装CentOs操作系统) 2.了解Linux操作系统 3.通过XShell工具操作Linu ...
- 【转】 71道经典Android面试题和答案,重要知识点都包含了
,,面试题1. 下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存 B.内存回收程序负责释放无用内存 C.内存回收程序允许程序员直接释放内存 ...
- .net 微信分享功能
微信在国内目前无疑是最火的社交软件,智能手机装机必备. 微信api有java,php,Python语言的demo, 为毛没有C#的范例?兄长今天给各位带来一个.不叫哥(割)了,A股今天又暴跌[3912 ...
- 怎么计算Oracle的表一条记录占用空间的大小
如何计算Oracle的表一条记录占用空间的大小? 如何计算Oracle的表记录占用空间的大小? 是把所有字段的大小都加起来吗?varchar(256),char,number算几个字节? ------ ...