<!-- 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 = , startY = ;

    //touchstart事件

    function touchSatrtFunc(evt) {

        try

        {

            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

            var touch = evt.touches[]; //获取第一个触点

            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[]; //获取第一个触点

            var x = Number(touch.pageX); //页面触点X坐标

            var y = Number(touch.pageY); //页面触点Y坐标

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

            //判断滑动方向

            if (x - startX != ) {

                text += '<br/>左右滑动';

            }

            if (y - startY != ) {

                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>

Touch事件 移动端touch触摸事件的更多相关文章

  1. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  2. 移动端 之 触摸事件、Tap事件和swipe事件

    触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...

  3. 2014-08-28——移动端，触摸事件 touchstart、touchmove、touchend、touchcancel

    1.Touch事件简介在移动终端上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事 ...

  4. 移动端JS 触摸事件基础

    一.手机上的触摸事件   基本事件:   touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 ...

  5. 移动端js触摸事件大全

    一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这 ...

  6. cocos creator 的scorllview 滑动事件和 子内容触摸事件会产生冲突

    1:问题描叙: UI上的 scorllview 的子元素需要拖动到游戏场景.所以子元素需要绑定触摸事件,scorllview 默认的事件处理方式就会和子元素的触摸事件冲突.2:解决方案: Scroll ...

  7. 移动端touch触摸事件（滑动效果和手势操作）

    一.定义 ①touch是移动端的触摸事件,而且是一组事件,主要有以下事件: touchstart 事件:当手指触摸屏幕的时候触发 touchmove 事件:当手指在屏幕来回滑动的时候触发 touche ...

  8. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  9. touchstart,touchmove,touchend触摸事件的小小实践心得

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

随机推荐

  1. python快速开始一-------常见的数据类型

    前置条件:已经安装好python程序 常用的数据类型 Python常见的数据类型: 整数:就是我们数学里面的整数,比如3455,python目前支持最大的32bit或者64bit 长整数(long): ...

  2. windows下的计算时间间隔 -- GetTickCount()

    用法: #include "windows.h" DWORD lastTime =0;DWORD currentTime = 0;DWORD spendTime = 0; last ...

  3. Java 中的 equals,==与 hashCode 的区别与联系

    一. 关系操作符 ==:若操作数的类型是基本数据类型,则该关系操作符判断的是左右两边操作数的值是否相等若操作数的类型是引用数据类型,则该关系操作符判断的是左右两边操作数的内存地址是否相同.也就是说,若 ...

  4. PostgreSQL学习笔记（一）—— macOS下安装

    安装命令:brew install postgresql 我的终端是zsh,所以添加环境变量到~/.zshrc vim ~/.zshrc export PATH=$PATH:/usr/local/Ce ...

  5. Go语言【数据结构】字符串

    字符串 简介 一个字符串是一个不可改变的字节序列,字符串通常是用来包含人类可读的文本数据.和数组不同的是,字符串的元素不可修改,是一个只读的字节数组.每个字符串的长度虽然也是固定的,但是字符串的长度并 ...

  6. 构建helm chart应用

    使用helm命令创建基础目录 helm create t2cp [root@node04 ~]# tree t2cp t2cp ├── charts ├── Chart.yaml ├── templa ...

  7. 过滤器 & 监听器 & 拦截器

    过滤器: https://blog.csdn.net/MissEel/article/details/79351231 https://blog.csdn.net/qq_32363305/articl ...

  8. java之mybatis之配置文件讲解

    1.核心配置文件 <configuration> <!-- 它们都是外部化,可替代的属性.可以配置在一个典型的Java 属性文件中,或者通过 properties 元素的子元素进行配 ...

  9. [golang]图片按中心旋转后，新图的左顶点位置的偏移量

    1 前言 图片按中心旋转后,新图的左顶点位置的偏移量 2 代码 func OffsetXYAfterRotationCore(W, H, L, T, Angle float64) (x, y floa ...

  10. IDEA和Eclipse启动优化

    昨天对比了下IDEA和Eclipse的启动速度,发现IDEA启动真的是好慢啊!!! 电脑配置:8G win7 IDEA启动配置 -Xms1024m -Xmx1024m -Xmn500m -XX:Met ...