<!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. cocos2dx打飞机项目笔记六：GameScene类和碰撞检测 boundingbox

    GameScene类虽然是占用游戏最多时间的类,但是里面的东西不是很多,最重要的就是碰撞检测了,碰撞检测代码如下: void GameScene::detectionCrash() { CCArray ...

  2. leetcode刷题3.无重复字符的最长子串

    题目:给定一个字符串,找出不含有重复字符的 最长子串 的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. ...

  3. Android内核开发：理解和掌握repo工具【转】

    本文转载自:http://ticktick.blog.51cto.com/823160/1653304 由于Android源码是用repo工具来管理的,因此,搞Android内核开发,首先要搞清楚re ...

  4. tree 命令【转】

    本文转载自:http://www.jb51.net/LINUXjishu/283874.html linux下怎么用tree命令以树形结构显示文件目录结构?tree命令可以以树形结构显示文件目录结构, ...

  5. Go 语言为Fibonacci函数实现Read方法

    Go语言非常灵活,只要为对象实现了相应的方法就可以把他看成实现了某个接口,类似于Durk Type, 为Fibonacci实现Read方法,就可以像读取文件一样,去读取下一个Fibonacci值. 示 ...

  6. Go 内置库 IO interface

    基本的 IO 接口 io 包为 I/O 原语提供了基本的接口.它主要包装了这些原语的已有实现. 由于这些接口和原语以不同的实现包装了低级操作,因此除非另行通知,否则客户端不应假定它们对于并行执行是安全 ...

  7. spark总结5 RDD

    创建RDD 有两种方式 1 通过hdfs支持的文件系统创建 RDD, RDD里面没有真正要计算的数据,只记录了一下元数据 2 从过scala集合或者数组以并行化的方式创建RDD collect 把结果 ...

  8. [BZOJ4730][清华集训2016][UOJ266] Alice和Bob又在玩游戏

    题意:俩智障又在玩游戏.规则如下: 给定n个点,m条无向边(m<=n-1),保证无环,对于每一个联通块,编号最小的为它们的根(也就是形成了一片这样的森林),每次可以选择一个点,将其本身与其祖先全 ...

  9. ifconfig源代码分析

    一.ifconfig显示 [root@10g-host4 new]# ifconfig eth0 Link encap:Ethernet HWaddr 00:26:B9:4A:FC:EA inet a ...

  10. JavaScript数组和函数的使用

    数组 数组:一个有顺序,有长度的数据集合 作用:存储大量数据 一.数组的定义 1.构造函数法:使用构造函数法的时候,都会使用new关键字 var arr=new Array(): 当长度为0 的时候, ...