HTML5学习总结-09 拖放和手机触屏事件
一 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分。拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
课程参考 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
二 手机触屏事件
1 触屏事件
touchstart
当手指触摸到屏幕时触发
touchmove
手指在屏幕上移动时触发
touchend
手指离开屏幕时触发
touchenter
当触点进入某个 element 时触发。
touchleave
当触点离开某个 element 时触发。
touchcancel
当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):
由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。
总结:触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。
1.1 触控手机屏幕例子:
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
<script>
var div = document.getElementById("div");
div.addEventListener("touchstart", function() {
console.log("接触到屏幕"); })
div.addEventListener("touchmove", function() {
console.log("在屏幕上移动"); })
div.addEventListener("touchend", function() {
console.log("离开屏幕"); })
</script>
</html>
2 触控点信息
每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度
2.1 打印触屏事件信息
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
width:100px;height:100px;background:red;
}
</style>
</head>
<body>
<div id="div"></div>
</body> <script>
var div = document.getElementById("div");
div.addEventListener("touchstart",function(e){
console.log("touchstart e.targetTouches="+e.targetTouches.length ); })
div.addEventListener("touchmove",function(e){
console.log("touchmove e.changedTouches[0].pageX="+e.changedTouches[].pageX); })
div.addEventListener("touchend",function(){
console.log("离开屏幕"); })
</script>
</html>
2.2 在屏幕上移动图片例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1,user-scalable =no">
<style>
#myDiv{
left: 50px;
top: 100px;
position: fixed;
border: 4px solid red;
}
</style>
</head> <body> <div id="myDiv"><img src="img/guangdongIcon.png"/></div> <script type="text/javascript">
var obj = document.getElementById('myDiv');
obj.addEventListener('touchmove', function(event) {
console.log(event.targetTouches.length)
// 如果这个元素的位置内只有一个手指的话
if(event.targetTouches.length == ) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX - + 'px';
obj.style.top = touch.pageY - + 'px';
}
}, false);
</script>
</body> </html>
知识点:
preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。以下代码JS会阻止链接跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" id="test">测试跳转 </a> <script type="text/javascript">
function stopDefault(e) {
if(e && e.preventDefault) { //如果是FF下执行这个
e.preventDefault();
} else {
window.event.returnValue = false; //如果是IE下执行这个
}
return false;
} var test = document.getElementById('test');
test.onclick = function(e) {
alert('URL:' + this.href + ', 不会跳转');
stopDefault(e);
}
</script>
</body> </html>
资料参考:
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
http://blog.sina.com.cn/s/blog_51048da70101f0ex.html
HTML5学习总结-09 拖放和手机触屏事件的更多相关文章
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 转:Android随笔之——使用Root权限实现后台模拟全局按键、触屏事件方法(类似按键精灵)
本文转载自CSDN的jzj1993,原文连接:http://blog.csdn.net/jzj1993/article/details/39158865 有时我们需要使用安卓实现在后台模拟系统按键,比 ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- 从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- (转)js的左右滑动触屏事件
原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...
- [IOS]自定义长触屏事件
写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecogn ...
- cocos2d-x触屏事件(单点触屏)
转自:http://blog.csdn.net/onerain88/article/details/7550009 一般经常用到的触屏的情况有两种:一种是Layer统一接收触屏消息,然后由程序根据需要 ...
- js触屏事件
js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...
随机推荐
- 我和Lua并非一见钟情,我们期待着日久生情(相遇篇)
Lua作为一款轻量级的脚本语言,由标准C编写而成,可被C/C++调用,也可调用C/C++的函数. 在目前的脚本引擎中,Lua的速度是最快的... Lua可直接在EditPlus文本处理器上开发,只需搭 ...
- OS存储器管理(一)
存储器的层次: 分为寄存器.主存(内存)和 辅存(外存)三个层次. 主存:高速缓冲存储器.主存储器.磁盘缓冲存储器, 主存又称为可执行存储器: 辅存:固定磁盘存储器.可移动的外部存储器: 其可长期保存 ...
- Codeforces Round #369(div 2)
A:=w= B:=w= C:题意:有一排树,有的树已经上色,有的树没有上色,只能给没上色的树上色,一共m种颜色,不同的树上不同的色花费不同,涂完色后,连续颜色的树成为一段.对于给定的段数k,求出最小花 ...
- [转]mysql免安装版配置
现在mysql有一个installer,相当于安装包管理器.包含mysql的各个组件,比如workbench,各个语言的connector.十分方便,不用就可惜了.实在没有必要下载zip版,自己配置. ...
- Ubuntu修改文件关联
* 在system setting>details中可以设置一部分文件关联,很弱很破. * 右键open with只能临时选择打开方式,并且可选的打开方式十分有限.如果是自己编的程序,在列表中没 ...
- yii2权限控制rbac之菜单menu最详细教程
前面我们在博文 yii2搭建完美后台并实现rbac权限控制实例教程中完美实现了yii2的后台搭建和rbac权限控制,如果你还没有实现,请先看上文再回来参考本文,因为本文是在上文的基础上进行完善和补充. ...
- canvas拖动
var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); v ...
- Linux 查看文件内容
cat 由第一行开始显示档案内容 格式: cat [选项] [文件]... -A, --show-all 等价于 -vET -b, -- 对非空输出行编号 -e 等价于 -vE -E, --在每行 ...
- finally关键字
final:禁止多态开关~修饰变量:变量不能被改变修饰类:类不能被继承修饰方法:方法不能被重写 finally:用在异常处理的最后一个语句块无论是否产生异常都要被执行~~~ Java代码 public ...
- 浅谈malloc()与free()
malloc()与free() l 函数原型 malloc函数的函数原型为:void* malloc(unsigned int size),它根据参数指定的尺寸来分配内存块,并且返回一个void型指 ...