html5 触摸 滚动,html5的触摸事件
1.触摸事件有哪些
touchstart,touchmove,touchend
2.分别什么时候触发
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
3.每个事件中的touch对象如何获得
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
最好统一使用一个touch对象数组
4.如何获得touch对象的相应属性
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
5.举例子
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
HTML5触摸事件(touchstart、touchmove和touchend) (转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
(转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
关于windows phone 8.1系统手机对html5触摸事件的支持情况
近日购入一部微软Lumia 640手机,目的主要就是为了测试年中开发完成的响应式移动web项目,同时也为了将来升级win10 mobile系统.由于我们的项目目前只考虑支持IOS与Android系统, ...
HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...
HTML5触摸事件演化tap事件
触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...
HTML5移动端触摸事件
一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...
HTML5触摸事件
touchstart .touchmove .touchend 事件 touchstart事件:当手指触摸屏幕时触发,即使有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动时触 ...
随机推荐
Quartus II USB-Blaster驱动解决
Quartus II USB-Blaster驱动解决 之前安装Quartus II 13.0,但FPGA开发板链接的USB-Blaster链接无法被Quartus识别,改装Quartus II 11. ...
修改thinkphp路由模式,去掉Home
第一步:入口文件增加 define('BIND_MODULE', 'Home'); 第二步:修改config文件,我这里路由模式设置为2 效果展示:
【编程题目】输出 1 到最大的 N 位数
65.输出 1 到最大的 N 位数(运算)题目:输入数字 n,按顺序输出从 1 最大的 n 位 10 进制数.比如输入 3,则输出 1.2.3 一直到最大的 3 位数即 999. 思路:肯定要考虑数字 ...
C#学习1
一.C#可以干什么? 1.桌面应用程序,WinForm 2.Internet应用程序,ASP.Net 3.手机开发,WindowsPhone8 二..Net开发学习路线 C#语言——>简单的Wi ...
MySql常用函数 --MySql
1.目标 MySQL数据库中提供了很丰富的函数.MySQL函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数.格式化函数等.通过这些函数,可以简化用户的操作.例如,字符 ...
IdentityServer4系列之中文文档及实际项目经验分享
0.前言 原文:http://docs.identityserver.io/en/release/声明: 1.目录一至五章节根据IdentityServer英文文档翻译而来,有些内容会根据自己的理解来 ...
sql 存储过程导出指定数据到.txt文件(定时)
需求:每天生成一份txt文件数据,供第三方通过http方式调用 方法: 1.新建存储过程: USE [LocojoyMicroMessage] GO /****** Object: StoredPro ...
ORA-01153: an incompatible media recovery is active
ORA-01153: an incompatible media recovery is active Cause: Attempted to start an incompatible media ...
RocketMQ 安装
RocketMQ 安装 1.进入目录 cd /usr 2.下载 wget http://mirrors.tuna.tsinghua.edu.cn/apache/rocketmq/4.3.0/rocke ...
Scrapy框架学习(四)爬取360摄影美图
我们要爬取的网站为http://image.so.com/z?ch=photography,打开开发者工具,页面往下拉,观察到出现了如图所示Ajax请求, 其中list就是图片的详细信息,接着观察到每 ...
html5 触摸 滚动,html5的触摸事件相关推荐
- html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理 分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...
- NGU- Scroll View实现触摸滚动相册效果
如下图所示,这是我们的工程页面,程序的实现原理是将相册在Unity3D世界中呈横向队列,摄像机固定的照射在第一个Item相册,当手指发生滑动事件时,计算向左滑动还是向右滑动,此时整体移动相册队列, ...
- 如何在HTML5页面中使用鼠标滚轮事件
支持鼠标滚轮可以为HTML5网页增加更多的交互性.不仅是滚动页面,您还可以执行不同的操作,如放大或缩小. 查看鼠标滚轮演示页面- 大多数的浏览器都支持元素的"mousewheel" ...
- iOS UITouch触摸与UIGesture手势.01.事件、触摸(touch)事件
一.iOS事件: 1.事件:事件就是当你在手机上点击手机屏幕.滑动手机翻面.摇动手机的时候,手机做出一些反应,对应的在应用程序里实现了某些代码的某些功能,完成这个过程就是一个事件. 2.iOS事件类型 ...
- iOS:触摸控件UITouch、事件类UIEvent
UITouch:触摸控件类 UIEvent:事件类 ❤️❤️❤️UITouch的介绍❤️❤️❤️ 一.触摸状态类型枚举 typedef NS_ENUM(NSInteger, UITouchPhas ...
- html5 怎么实现展开文字,html5实现滚动文字
滚动文字可以用javascript实现,今天我们用html5的滚动文字标签:marquee实现.只要在标签之间写要进行滚动的文字即可,而且可以设置这些文字的样式.默认从浏览器的右方缓缓向左滚动(循环) ...
- html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动 一,假设 假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
- html5实现滚动文字
html5实现滚动文字 1 2 3 4 <div class="custom-notice"> <i class="icon-notice&quo ...
- html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
最新文章
- Pyhton,OpenCV对象检测之——Haar级联人脸及眼睛检测
- 如何查看linux版本
- linux7内核优化,centos7 系统内核、网络等优化(适用高并发)
- Genome-scale de novo assembly using ALGA 使用ALGA进行 基因组规模的从头组装
- 在window平台运行Dubbo的一个小demo
- 严谨技术支撑vs奔放客户的100个真实写真
- [蓝桥杯][2014年第五届真题]生物芯片(数论)
- cursor: mutex S等待事件
- 计组之指令系统:1、指令系统概述(定义、分类、格式、扩展操作码指令格式)
- 熵权法计算权重原理python实现
- 方正税控计算机配置,方正计算机U盘启动优先级的BIOS设置说明_IT /计算机_信息...
- 小白如何进入IT行业及如何选择培训机构
- 拖拽式生成CMS和在线商店:Microweber
- java script jsp_JSP和Java Script问题
- 宋宝华:Linux内核中用GFP_ATOMIC申请内存究竟意味着什么?
- 用photoshop制作logo
- cisco pkt 路由器配置基础及接口配置 路由协议与交换技术
- Python+vue+elementui高考志愿填报辅助系统django
- 将一个字符串反转后并输出,代码如下:
- Windows Style Builder学习制作笔记(二)
热门文章
- 日常生活开支记账明细_学会记账对个人理财的好处
- 夜天之书 #64 开发者体验的基础设施
- 医院网络广告的投放渠道及效果分析-站外合作篇
- 【卷积神经网络】CNN发展史
- 苹果x美版信号测试软件,iPhone X和iPhone XS的基带不同,信号就差别真这么大吗?还真的是有很大的区别!...
- Linux命令-压缩和解压缩命令
- 汽车行业数据存储越发复杂?群晖备份存储方案为您支招
- Primavera P6 EPPM R17.12.X Patch/Update(补丁/更新)
- CSS文本框边框发光效果
- 【机器学习 - 决策树】信息增益