七空幻音LOGO

七空幻音

移动端Touch触摸事件2016-05-16 17:18:50

在一般浏览网页的时候,有时都会用手机去浏览,但是一些PC浏览器的事件却不能实现,比如鼠标拖动事件,在手机端不好控制,在HTML5中的Touch就可以让手机也拥有触摸事件。

touchstart事件:在手指触摸的时候触发(和PC的click事件一样)。

touchend事件:在手指触发松开的时候触发。

touchmove事件:在手指拖动元素的时候触发(就像PC的mousemove一样)

对于移动端的Touch事件也有固定的属性,Touch是用手指去触发的,那么就肯定有获取手指的列表

touches:获取屏幕上的所有手指列表

targetTouches:获取当前元素上的所有手指列表

changedTouches:涉及当前事件的手指列表

还有几个属性如同PC上的坐标,目标等属性

target: 获取指定的目标

clientX/clientY:获取目标在元素在视图中的X轴和Y轴

pageX/pageY:获取目标在页面中的X轴和Y轴

screenX/screenY:获取目标在屏幕中的X轴和Y轴

identifier:触摸的手指ID

所以在一般开发过程中,用到touchmove和touchend事件就行了,pc中的click的事件在移动端中都是通用的。

下面写了一个小Demo来演示一下这三个事件的用法。


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>【七空幻音】移动端Touch触摸事件</title>
    <style>
        *{
            margin:0;padding:0;
        }
        #main{
            background:black;
            width:200px;
            height:200px;
            left:200px;
            position:absolute;
            color:#fff;
        }
        #log{width:150px;}
    </style>
</head>
<body>
    <div id="main"></div>
    <ul id="log"></ul>
    <script>
        var oDiv = document.getElementById("main");//获取目标元素
        var log = document.getElementById("log");//触发日志

        oDiv.addEventListener("touchmove", function(e) {//添加监听移动监听事件
            e.preventDefault();//首先把浏览器的默认事件阻止了
            if (e.targetTouches.length == 1) {//判断是否是一根手指来移动
                var touch = e.targetTouches[0];//获取第一根手指
                oDiv.style.left = touch.pageX-50 + 'px';//设置距离左侧的距离和偏移量
                oDiv.style.top = touch.pageY-50 + 'px';//设置距离上方的距离和偏移量
              }
         }, false);
        //触摸屏幕事件
        oDiv.addEventListener("touchstart",function(){//添加触摸事件
            var li = document.createElement("li");
            li.innerText = "已触摸屏幕";//输出一下事件触发
            li.style.color="green";
            log.appendChild(li);
        },false);

        oDiv.addEventListener("touchend",function(){//添加松开事件
            var li = document.createElement("li");
            li.innerText = "已离开屏幕";//输出一下事件触发
            li.style.color="#666";
            log.appendChild(li);
        },false)
    </script>
</body>
</html>


Demo下载地址:

【七空幻音】移动端Touch触摸事件

1条评论登录后可见

详细图片
载入中...