目有个交互需要实现手指滑动的交互，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. Redis 使用 Eval 多个键值自增操作示例

    在PHP上使用Redis 给多个键值进行自增,示例如下: $set['money'] = $this->redis->hIncrByFloat($key, $hour .'_money', ...

  2. 【2】JavaScript编程全解笔记（二）

    你过去的种种经历,就像人生的一颗颗珍珠,在未来的某一天,你找到了那根线,你就会把她们串联起来,变成美丽的项链. 第八章 客户端 JavaScript 与 HTML 1. 浏览器渲染页面的步骤 2.   ...

  3. Linux 下搭建jsp服务器（配置jsp开发环境）

    Linux 做为服务器的高效一直时为人所熟知的了,在linux 上搭建各种各样的服务器和开发环境也时学计算机的人常做的.以下时最近在linux配置jsp服务器的全过程,包含一些基本步骤和排错过程: 1 ...

  4. MFC 刷新失效的Picture控件

    问题描述:如在摄像头显示时,关闭摄像头,此时Picture控件仍然显示最后一帧图像,需要刷新掉,还原Picture控件.或者重复显示两张不同大小的图片时,第二张背景有第一张图片残留. 解决方法1:(最 ...

  5. Code Sign error: No code signing identities found: No valid signing identities

    Code Sign error: No code signing identities found: No valid signing identities 解决办法:如果证书可获取,最简办法就是把所 ...

  6. js实现的笛卡尔乘积-商品发布

    //笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIn ...

  7. JavaScript DOM编程艺术-学习笔记（第八章、第九章）

    第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让 ...

  8. cxf 报错：java.lang.NoSuchMethodError: org.apache.ws.commons.schema.XmlSchemaCollection.read(Lorg/w3c/dom/Document;Ljava/lang/String;)

    由于没有仔细查看官方提供的文档,由jdk版本不一致导致的出错: http://cxf.apache.org/cxf-316-release-notes.html 自己使用的是jdk1.8. 报Exce ...

  9. NetPayClient for PHP使用说明

    名 称 放置的路径 用 途 SecssUtil.class.php 根据项目工程的需要放置对应路径下 支持PHP5.4.8及以上版本 用于提供商户签名.验签.加密.解密.文件验签等方法调用 Mer.p ...

  10. SSH综合练习-仓库管理系统-第二天

    SSH综合练习-仓库管理系统-第二天 今天的主要内容: 货物入库 页面信息自动补全回显功能:(学习目标:练习Ajax交互) 根据货物简记码来自动查询回显已有货物(Ajax回显) 根据货物名来自动查询补 ...