目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。

如何获取手指滑动时的坐标位置呢?

直接使用event.clientX是不起作用的，要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象，使用event.originalEvent.changedTouches[0].clientX。

移动端touch事件获取clientX, clientY的更多相关文章

  1. H5案例分享：移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. 移动端Touch事件基础

    1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...

  3. 移动端Touch事件

    案例1: <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  7. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  8. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  9. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

随机推荐

  1. VS2012 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决

    VS2012 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决办法 2014 年 5 月 3 日作者:mingceng 阅读次数: ...

  2. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

  3. Openwrt 初始化脚本

    Openwrt 使用自己的初始化脚本系统,所有的初始化脚本位于 /etc/init.d 目录下. 任何一个初始化脚本必须包含基本的 start() 和 stop() 函数.当系统启动或用户拉起对应的进 ...

  4. jffs2reset 实现分析

    在脚本 reset2default中看到如下内容: #!/usr/bin/lua local hwm = require "hwm" hwm.myexec("jffs2r ...

  5. cetos6 安装samba共享文件夹

    yum方式安装 yum install samba 修改配置文件 vim /etc/samba/smb.conf [global] comment = global workgroup = QFpay ...

  6. nodejs学习随笔

    <一> 简述nodejs (社区:www.npmjs.com)可查找一些第三方模块. nodejs是可以让js运行在浏览器之外的服务器端的平台,实现了文件系统.模块.包.操作系统API.网 ...

  7. bayboy下载安装

    badboy是jmeter工具的好搭档. 好处体现在那里呢? JMeter是纯Java编写的软件功能和性.能测试工具,其录制脚本过于笨拙和复杂. 而Badboy是用C++开发的动态应用测试工具,其拥有 ...

  8. form表单直接传文件

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. 成为java高手的八大条件

    1.扎实的基础  数据结构.离散数学.编译原理,这些是所有计算机科学的基础,如果不掌握它们,很难写出高水平的程序.程序人人都会写,但当你发现写到一定程度很难再提高 的时候,就应该想想是不是要回过头来学 ...

  10. jdbc连接数据库的步骤

    1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的静态方法forName(String  classN ...