一 拖放

　　拖放（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 拖放和手机触屏事件的更多相关文章

  1. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  2. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 转:Android随笔之——使用Root权限实现后台模拟全局按键、触屏事件方法（类似按键精灵）

    本文转载自CSDN的jzj1993,原文连接:http://blog.csdn.net/jzj1993/article/details/39158865 有时我们需要使用安卓实现在后台模拟系统按键,比 ...

  4. 移动端touch触屏滑动事件、滑动触屏事件监听！

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  5. 从零开始学 Web 之 移动Web（二）JD移动端网页，移动触屏事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. (转)js的左右滑动触屏事件

    原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...

  7. [IOS]自定义长触屏事件

    写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecogn ...

  8. cocos2d-x触屏事件（单点触屏）

    转自:http://blog.csdn.net/onerain88/article/details/7550009 一般经常用到的触屏的情况有两种:一种是Layer统一接收触屏消息,然后由程序根据需要 ...

  9. js触屏事件

    js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...

随机推荐

  1. 基于Laravel+Swoole开发智能家居后端

    基于Laravel+Swoole开发智能家居后端 在上一篇<Laravel如何优雅的使用Swoole>中我已经大概谈到了Laravel结合Swoole的用法. 今天,我参与的智能家居项目基 ...

  2. 学习Google Protocol buffer之概述

    XML这种属于非常强大的一种格式,能存储任何你想存的数据,而且编辑起来还是比较方便的.致命的缺陷在于比较庞大,在某些情况下,序列化和解析都会成为瓶颈.这种对于实时性很强的应用来说,就不太适合了,想象下 ...

  3. SDRAM读写一字（上）

    SDRAM读写一字 系统设计 SDRAM指令 指令 常量名 CKE CSn RAS CASn WEn 备注 空操作 NOP 1 0 1 1 1   行激活 ACTIVE 1 0 0 1 1   读操作 ...

  4. Beta版冲刺Day1

    会议讨论: 628:        已经成功实现了文件的上传功能,但是按钮的布局有点不好看.未完成的功能有:修改老师信息时候弹出小窗口进行修改. 601:        目前还在解决剩下的问题,比如将 ...

  5. 你需要知道的MySQL开源存储引擎TokuDB

    在四月份的Percona Live MySQL会议上, TokuDB庆祝自己成为开源存储引擎整一周年.我现在仍能记得一年前它刚创建时的官方声明与对它的期望.当时的情况非常有意思,因为它拥有帮助MySQ ...

  6. ubuntu14.04完全卸载mysql

    1.删除 mysql1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server 3 su ...

  7. 关于idea 修改jsp文件后不能生效

    打开server 的配置界面: 其中 修改on update Action 为 Redeploy On frame deactivation 为Update classes and resources

  8. Linux_虚拟机_安装VMware Tools

    以root用户执行,否则可能会出现权限不足,无法执行的情况 一.点击安装Vmware Tools   二.拖动安装文件到桌面并解压   三.双击并[在终端中运行]   四.根据提示回车或输入yes   ...

  9. 【BZOJ 1492】【NOI 2007】货币兑换Cash

    这是道CDQ分治的例题: $O(n^2)$的DP: f [1]←S* Rate[1] / (A[1] * Rate[1] + B[1]) Ans←SFor i ← 2 to n For j ←1 to ...

  10. hadoop,mapreduce---分布式计算

    从图中可以看出,map阶段的shuffle: 例如word count,当内存缓冲区满的时候会写到磁盘,一个spill,每个spill,进行分区,排序,最后将同一个分区word合并在一起,写入到磁盘中 ...