Touch事件移动端touch触摸事件

黄三岁大爱人生 2018-08-13

展开全文

<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
    <title>TouchEvent测试</title>
    <meta charset="gbk">
</head>
<body>
<h2>TouchEvent测试</h2>
<br />
<div id="version" style="border:2px solid black;background-color:yellow"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="result" style="border:2px solid red; color:red;">未触发事件！</div>
<div id="test" style="border:2px solid red">
    <ul>
        <li id="li1">测试条目1</li>
        <li id="li2">测试条目2</li>
        <li id="li3">测试条目3</li>
        <li id="li4">测试条目4</li>
        <li id="li5">测试条目5</li>
        <li id="li6">测试条目6</li>
        <li id="li7">测试条目7</li>
        <li id="li8">测试条目8</li>
        <li id="li9">测试条目9</li>
        <li id="li10">测试条目10</li>
        <li id="li11">测试条目11</li>
        <li id="li12">测试条目12</li>
        <li id="li13">测试条目13</li>
        <li id="li14">测试条目14</li>
        <li id="li15">测试条目15</li>
        <li id="li16">测试条目16</li>
        <li id="li17">测试条目17</li>
        <li id="li18">测试条目18</li>
        <li id="li19">测试条目19</li>
        <li id="li20">测试条目20</li>
    </ul>
</div>

<script type="text/javascript">
    //全局变量，触摸开始位置
    var startX = 0, startY = 0;

    //touchstart事件
    function touchSatrtFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

            var touch = evt.touches[0]; //获取第一个触点
            var x = Number(touch.pageX); //页面触点X坐标
            var y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;

            var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
            document.getElementById("result").innerHTML = text;
        }
        catch (e) {
            alert('touchSatrtFunc：' + e.message);
        }
    }

    //touchmove事件，这个事件无法获取坐标
    function touchMoveFunc(evt) {
        try
        {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            var touch = evt.touches[0]; //获取第一个触点
            var x = Number(touch.pageX); //页面触点X坐标
            var y = Number(touch.pageY); //页面触点Y坐标

            var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

            //判断滑动方向
            if (x - startX != 0) {
                text += '<br/>左右滑动';
            }
            if (y - startY != 0) {
                text += '<br/>上下滑动';
            }

            document.getElementById("result").innerHTML = text;
        }
        catch (e) {
            alert('touchMoveFunc：' + e.message);
        }
    }

    //touchend事件
    function touchEndFunc(evt) {
        try {
            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

            var text = 'TouchEnd事件触发';
            document.getElementById("result").innerHTML = text;
        }
        catch (e) {
            alert('touchEndFunc：' + e.message);
        }
    }

    //绑定事件
    function bindEvent() {
        document.addEventListener('touchstart', touchSatrtFunc, false);
        document.addEventListener('touchmove', touchMoveFunc, false);
        document.addEventListener('touchend', touchEndFunc, false);
    }

    //判断是否支持触摸事件
    function isTouchDevice() {
        document.getElementById("version").innerHTML = navigator.appVersion;

        try {
            document.createEvent("TouchEvent");
            alert("支持TouchEvent事件！");

            bindEvent(); //绑定事件
        }
        catch (e) {
            alert("不支持TouchEvent事件！" + e.message);
        }
    }

    window.onload = isTouchDevice;
</script>
</body>
</html>