<!-- 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. 向DataGrid数据表格增加查询搜索框

    向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...

  2. Python中NumPy的使用一

    NumPy简介: 一个用python实现的科学计算,包括:1.一个强大的N维数组对象Array:2.比较成熟的(广播)函数库:3.用于整合C/C++和Fortran代码的工具包:4.实用的线性代数.傅 ...

  3. git 学习笔记--Feature分支

    软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合 ...

  4. postgreSQL 备份+还原多张表

    -U表示用户 -h表示主机 -p表示端口号 -t表示表名 -f表示备份后的sql文件的名字 -d表示要恢复数据库名 一.打开cmd 进入postgresql安装路径下的bin文件夹,以我的为例: cd ...

  5. 2019 同程旅游java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.同程等公司offer,岗位是Java后端开发,因为发展原因最终选择去了同程,入职一年时间了,之前面试了很多家公 ...

  6. 一个超实用的python爬虫功能使用 requests BeautifulSoup

    一个简单的数据爬取的示例 import os,re import requests import random import time from bs4 import BeautifulSoup us ...

  7. 一个牛逼的 Python 调试工具PySnooper

    原文转自:https://mp.weixin.qq.com/s/OtLr-cNethboMgmCcUx2pA PySnooper 使用起来十分简单,开发者可以在任何庞大的代码库中使用它,而无需进行任何 ...

  8. 【夯实基础】- Java中的fail-fast机制

    转载自:Java中的fail-fast机制 遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过普通的for删除删除符合条件 ...

  9. 【面试突击】- Java面试总则

    Java基础 1.Map.Set.List集合差别及联系详解 2.HashSet类是如何实现添加元素保证不重复的 3.HashMap 是线程安全的吗,为什么不是线程安全的(最好画图说明多线程环境下不安 ...

  10. Mac 指令

    Mac 展示隐藏目录 // 设置隐藏文件不可见 defaults write com.apple.finder AppleShowAllFiles FALSE // 设置隐藏文件可见 defaults ...