<!-- 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. ReflectionUtils.invokeMethod的作用

    Object invokeMethod(Method method, Object target, Object... args)在指定对象(target)上,使用指定参数(args),执行方法(me ...

  2. 基于SpringSecurity实现RBAC权限控制（待完善）

    Spring Security是一个为企业应用系统提供声明式的安全访问控制功能,减少为了企业应用系统安全控制而编写的大量重复代码. 认证: spring security的原理就是使用很多的拦截器对U ...

  3. Vivado关联Notepad++

    Vivado自带的编辑器非常难看,我习惯用Notepad++,这里记录一下二者的关联. 1.打开Vivado,点击 Tools --- Settings --- Text Editor,右侧选择 Cu ...

  4. Codeforces Round #596 (Div. 1, based on Technocup 2020 Elimination Round 2)

    (第一把div1心态崩了,给大家表演了一把上蓝) (看来以后div1需要先读前三题,如果没把握切掉还是不要交了……) A: 题意是求最少用几个形如$2^{t}+p$的数拼出n,给定n和p.$n\leq ...

  5. 对于解决VS2015启动界面卡在白屏的处理方法

    有时候会遇到这种情况,仅供参考 找到devenv.exe所在文件夹,按住Shift,在空白地方右键,选择“在此处打开命令窗口”,在打开的窗口中输入devenv /ResetSettings 重新设置V ...

  6. C#-Windows服务创建和运行

    Windows服务创建和运行    适用场景: ASP.Net通常是一个无状态的提供程序,不支持持续运行代码或者定时执行某段代码,所以我们需要构建自己的Windows服务来运行那些定时任务. 项目中需 ...

  7. spring boot 分布式锁组件 spring-boot-klock-starter

    基于redis的分布式锁spring-boot starter组件,使得项目拥有分布式锁能力变得异常简单,支持spring boot,和spirng mvc等spring相关项目 快速开始 sprin ...

  8. .net core 使用swagger接口描述

    首先安装nuget包 Swashbuckle.AspNetCore.Swagger Swashbuckle.AspNetCore.SwaggerGen Swashbuckle.AspNetCore.S ...

  9. 关于 Safari 浏览器不支持 location [ window.location.href window.open()] 跳转问题的解决方案

    最近在做项目时,碰到 safari 浏览器不支持location跳转问题,针对此问题,可以通过 js 模拟点击时间来解决,代码如下: <!DOCTYPE HTML> <html la ...

  10. FIneUICore 版本的 AppBoxMvcCore

    http://www.51aspx.com/code/codename/64088 CORE版本的APPBOXMVC欢迎下载