<!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. 关于读取本地text文件,自动被添加空格的问题

    最近做一个小程序,读取本地指定路径下的text文件,逐行获取text文本然后再进行处理,结果遇到了一个奇葩问题,先插个图片给各位看官 坑:本地text文件中数据为1123/10(数据反复检查无空格,换 ...

  2. jquery开发js插件

    1.需要掌握的知识点 1)(function($){...}(jQuery)):实际上就是匿名函数并且函数用()阔起来,形成闭包,外界对其内部函数没有影响 $(function(){…});   jQ ...

  3. CodeForces 266E More Queries to Array...（线段树+式子展开）

    开始觉得是规律题的,自以为是的推了一个规律,结果测试数据都没过....看了love神的博客才发现只是把式子展开就找到规律了.不过挺6的是我虽然想错了,但是维护的的东西没有错,只是改改(改了进两个小时好 ...

  4. UvaLive 5811 概率DP

    题意 : 有54张牌 问抽多少张牌能使每种花色都至少是给定的数字 两张王牌可以被选择为任何花色 高放学长真是太腻害辣! 设置dp[][][][][x][y] 前四维代表四种真的花色的数量 后两维xy代 ...

  5. QT 实现拖放功能

    1. 文档拖放 获取文件名 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #i ...

  6. UOJ66 新年的巧克力棒

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  7. bzoj 2656 [Zjoi2012]数列(sequence) 递推+高精度

    2656: [Zjoi2012]数列(sequence) Time Limit: 2 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Descri ...

  8. Java中各种集合特点总结

    1:集合:    (1) Collection(单列集合)         List(有序,可重复)             ArrayList                 底层数据结构是数组,查 ...

  9. 关于UML方法学图中类之间的关系:依赖,泛化,关联

    类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中,每个类具有一定的职责,职责指的是类所担任的任务,即类要完成什 ...

  10. 在win+r中常用的命令

    cmd打开命令提示符 regedit打开注册表 gpedit.msc组策略 services.msc打开服务列表 msconfig系统配置(可以设置开机自启动) compmgmt.msc 计算机管理 ...