<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"        name="viewport" />

    <script type="text/javascript">

        function a() {

            var mdiv = document.getElementById("mdiv");

            var mdiv2 = document.getElementById("mdiv2");

            var mdiv3 = document.getElementById("mdiv3");

            var m = Math,

            isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

            hasTouch = 'ontouchstart' in window && !isTouchPad,

            START_EV = hasTouch ? 'touchstart' : 'mousedown',

         MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',

         END_EV = hasTouch ? 'touchend' : 'mouseup',

         CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup';

            mdiv.addEventListener(MOVE_EV, function (e) {

                var point = hasTouch ? e.touches[0] : e;

                mdiv3.innerHTML = "X:" + point.pageX + ";Y:" + point.pageY + "";

            }, false);

            mdiv.addEventListener(START_EV, function (e) {

                var point = hasTouch ? e.touches[0] : e;

                mdiv2.innerHTML = "BeginX:" + point.pageX + ";BeginY:" + point.pageY + "<br/>";

            }, false);

            mdiv.addEventListener(END_EV, function (e) {

                var point = hasTouch ? e.changedTouches[0] : e;

                mdiv2.innerHTML +=( "EndX:" + point.pageX + ";EndY:" + point.pageY + "");

            }, false);

        }

    </script>

</head>

<body onload="a()">

<div style="border: solid 1px #000000; background: #ffffff; width: 100%; height: 299px; margin:auto" id="mdiv">

    <div id="mdiv3"> </div>

    <div id="mdiv2"></div>

</div>

</body>

</html>

wap手机端按下 松开 滑动事件的更多相关文章

  1. 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  2. Android 解决Gallery下ScrollView滑动事件冲突

    在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义 ...

  3. 原生js手机端触摸下拉刷新

    废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  4. wap手机端实现上传图片流程

    实现图片上传使用了WeUI uploader插件 WeUI:是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计 流程:图片上传用到了FileReader,FormData,用这两个基本 ...

  5. 手机端Swiper 触屏滑动

    在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-con ...

  6. 手机端js模拟长按事件（代码仿照jQuery）

    代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...

  7. wap手机端解决返回上一页，js

    <input id="hd_referrer" type="hidden" />                <a href="j ...

  8. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. css实现手机端导航栏左右滑动

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

随机推荐

  1. 后向传播算法“backpropragation”详解

    为什么要使用backpropagation? 梯度下降不用多说,如果不清楚的可以参考梯度下降算法. 神经网络的参数集合theta,包括超级多组weight和bais. 要使用梯度下降,就需要计算每一个 ...

  2. pom.xml里使用了一系列的版本的框架，配置一个版本属性，让使用版本的都引用这个属性

    在pom.xml定义properties标签 <properties> <project.build.sourceEncoding>UTF-8</project.buil ...

  3. bat定时检测系统服务是否开启

    @echo offrem 定义循环间隔时间和监测的服务:set secs=90set srvname="Apache2a" echo.echo ================== ...

  4. 一言（ヒトコト）Hitokoto API

    『想要成为无论多么悲伤的时候,也能够漂亮微笑的人吧.』 Hitokoto API 更新:2014.02.22 问题/反馈:api # hitokoto.us 数据获取:[ 数据获取 ] 调用举例:[  ...

  5. 0.00-050613_Makefile

    # Makefile for the simple example kernel. AS86 =as86 -0 -a LD86 =ld86 -0 AS =gas LD =gld LDFLAGS =-s ...

  6. 20个PHP面试题及答案

    php学了那么久了,先来小试牛刀,看下这些PHP程序员面试题都会不会?初级题目1.问题:请用最简单的语言描述PHP是什么?答:PHP全称:Hypertext Preprocessor,是一种用来开发动 ...

  7. php 实现微信模拟登陆、获取用户列表及群发消息功能示例

    本文实例讲述了php实现微信模拟登陆.获取用户列表及群发消息功能.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  8. 深入浅出Mybatis系列（九）---强大的动态SQL(转载)

    原文出处:http://www.cnblogs.com/dongying/p/4092662.html 上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.r ...

  9. [转载]Java开发在线打开编辑保存Word文件

    Java调用logo是“P”图标的第三方插件,实现在线编辑保存Word文件(以jsp调用为例,支持SSM.SSH.SpringMVC等流行框架) 工具/原料   Eclipse或MyEclipse等j ...

  10. JVM_总结_01_JDK的安装

    一.前言 本文主要简要介绍下JDK的安装 二.下载 1.JDK下载地址 前往官方网站下载JDK jdk8官网下载 2.JDK下载 如下图 下载完之后得到安装软件,如下图 三.安装 双击运行安装软件,即 ...