HTML5学习总结-09 拖放和手机触屏事件

最新推荐文章于 2024-07-23 11:32:13 发布

aejkscy8680

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量106

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/wangshuo1/p/5859434.html

版权

一拖放

　　拖放（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[0].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 == 1) {　　　　
                    event.preventDefault(); // 阻止浏览器默认事件，重要 
                    var touch = event.targetTouches[0];
                    // 把元素放在手指所在的位置
                    obj.style.left = touch.pageX - 50 + 'px';
                    obj.style.top = touch.pageY - 50 + '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

转载于:https://www.cnblogs.com/wangshuo1/p/5859434.html

aejkscy8680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习总结-09 拖放和手机触屏事件

一拖放　　拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。　　课程参考 http://www.w3school.com.cn/html5/html_5_draganddrop.asp 二手机触屏事件1 触屏事件touchstart　　当手指触摸...
复制链接

扫一扫