<!-- 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. Linux学习、Mongodb部署 踩到的坑学习

    一.安装Centos 7虚拟机系统 1.系统安装 下载阿里云的镜像,下载后安装,默认全程图形界面:虚拟机使用Win10自带的Hyper:碰到的坑记录下 1.在Hyper加载镜像启动的时候,提示“虚拟机 ...

  2. VMnet1、VMnet8到底是什么？

    当我们安装VMware Workstation后,在宿主机(物理电脑)上会多出两个网卡,VMNet1.VMNet8,在虚拟机设置里会多出一个配置 VMNet0. vmnet1和vmnet8是两个虚拟网 ...

  3. Word页眉实现首页不同、奇偶页不同 、更改页眉横线、页眉文字对齐 -- 视频教程(8)

    1. 目标 目标1:实现页眉"首页不同,奇偶页不同" 目标2:更改页眉横线 目标3:页眉文字有三部分:第一部分左对齐,第二部分居中,第三部分右对齐 2. 教程 未完 ...... ...

  4. BJFU—214基于链式存储结构的图书信息表的创建和输出

    #include<stdio.h>#include<stdlib.h>#define MAX 100 typedef struct bNode{ double no; char ...

  5. redis源码分析(三)--rdb持久化

    Redis rdb持久化 Redis支持两种持久化方式:rdb与aof.rdb将一个节点上的内存数据序列化后存储到磁盘中,序列化的数据以尽可能节约空间的方式存储,并非完全的ascii表示.它的优点在于 ...

  6. golang 堆排序

    堆排序的思想  因为堆的形式是完全二叉树,跟数组的索引形成映射,可以使用数组保存.先构建最大(小)堆,根结点就是最大(小)值,删除根结点之后的节点重新构建堆,依此顺序,即可完成堆排序. 代码实现 pa ...

  7. JavaScript 的 深拷贝和浅拷贝

    深拷贝和浅拷贝都是针对的引用类型, JS中的变量类型分为值类型(基本类型)和引用类型: 对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会对地址进行拷贝,最终两个变量指向同一份数据 一.先 ...

  8. 全选全不选案例table表格

    全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...

  9. Nuxt.js vue init nuxt-community/koa-template 初始化项目报错

    报错提示: Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functi ...

  10. 纽约LangeEylandt长岛LongIsland

    LangeEylandt n.长岛(美国) 纽约长岛 纽约长岛 (LongIsland)是北美洲在大西洋内的一个岛,最早追溯到十七世纪的1650年被命名为Lange Eylandt [1] ,位于北美 ...