<!-- 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. Java的集合类之Set接口

    Set最大的特性就是不允许在其中存放的元素是重复的.根据这个特点,我们就可以使用Set 这个接口来实现前面提到的关于商品种类的存储需求.Set 可以被用来过滤在其他集合中存放的元素,从而得到一个没有包 ...

  2. 前端与算法 leetcode 27.移除元素

    目录 # 前端与算法 leetcode 27.移除元素 题目描述 概要 提示 解析 算法 @(目录) # 前端与算法 leetcode 27.移除元素 题目描述 27.移除元素 概要 题目本身其实挺简 ...

  3. RestTemplate支持GET方法携带Body信息

    首先必须声明: GET方法支持通过Body携带参数(HTTP1.1开始支持) 但是默认的RestTemplate是不支持滴!原因如下: RestTemplate支持通过setRequestFactor ...

  4. Docker容器数据管理（数据卷&数据卷容器）

    一:前言 在Docker容器的实际使用中,经常会遇到容器的数据持久化,容器之间的数据共享等问题,通常我们有两种解决方案: 1)数据卷(Data Volumes):就是将容器内数据直接映射到本地主机环境 ...

  5. [Docker] - 不同容器之间相互访问的实现方式（例如：Client 访问 DB）

    部署了两个独立的容器: Container #1 - Web ClientContainer #2 - SQL Server 不同容器间如何互访? 无法从 Container #1 访问到 Conta ...

  6. Delphi编码与签名【URL编码与解码，Base64编码与解码，MD5加密，HMAC-SHA1、HMAC-SHA224、HMAC-SHA256、HMAC-SHA384和HMAC-SHA512签名】

    作者QQ:(648437169) 点击下载➨delphi编码与签名 [Delphi编码与签名]URL编码与解码,Base64编码与解码,MD5加密,HMAC-SHA1.HMAC-SHA224.HMAC ...

  7. tkinter中Partial Function Example

    from functools import partial as pto from tkinter import Tk, Button, X from tkinter.messagebox impor ...

  8. 【LEETCODE】68、动态规划，medium级别，题目：95、120、91

    package y2019.Algorithm.dynamicprogramming.medium; /** * @ProjectName: cutter-point * @Package: y201 ...

  9. Bootstrap中的datetimepicker用法总结

    bootstrap时间控件参考文档(少走弯路) https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC% ...

  10. MongoDB和Java（2）：普通用户启动mongod进程

    最近花了一些时间学习了下MongoDB数据库,感觉还是比较全面系统的,涉及了软件安装.客户端操作.安全认证.副本集和分布式集群搭建,以及使用Spring Data连接MongoDB进行数据操作,收获很 ...