移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是touchstart时获取到的元素,而并非手指所移动到上方的元素,所以在处理获取移动到哪个元素上方之类的需求时,普通方法已不奏效,解决方式如下:

var element = document.elementFromPoint(event.originalEvent.pageX, event.originalEvent.pageY);

这样获取到的即为所需元素。

备注:不同版本可能获取方式不同,有的是利用下面的代码来获取

document.elementFromPoint(event.clientX, event.clientY);

例:

  $('li').on('touchmove',function(){

    var element = document.elementFromPoint(event.touches[0].pageX, event.touches[0].pageY);

  })

转载原贴 http://blog.csdn.net/greatwang123/article/details/39496053

关于如何获取移动端 touchmove 事件中真正触摸点下方的元素的更多相关文章

  1. 获取移动端 touchend 事件中真正触摸点下方的元素

    移动端的touchstart, touchmove, touchend三个事件,拖动元素结束时,获取到了touchend事件, 但是event.touches[0].target所指向的元素却是tou ...

  2. 移动端 touchmove高频事件与requestAnimationFrame的结合优化

    移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化,使用 requestAnimationFrame性能优化 H5性能优化requestAnimati ...

  3. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

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

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

  5. html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">     <meta ...

  6. 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获

    项目开发中的一些注意事项以及技巧总结   1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...

  7. GridView控件RowDataBound事件中获取列字段值的几种途径

    前台: <asp:TemplateField HeaderText="充值总额|账号余额"> <ItemTemplate> <asp:Label ID ...

  8. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)

    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...

  9. C# 有关控件、自定义类事件中的委托链的获取、移除操作

    直接来代码吧,这样干脆直接,也不耽误我午休了.一切尽在源码中. public class ControlEventTool { /// <summary> /// 移除控件的某类事件, 如 ...

随机推荐

  1. 浅谈oracle树状结构层级查询测试数据

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  2. 使用vim编写hexo文档,并用ultisnips/snipmates/snippets插件补全

    作为一个vim使用者,编写markdown文档时若不能用vim这怎么能受的了! 下面是我编写markdown的时候用到的插件 Plugin 'Markdown'Plugin 'Markdown-syn ...

  3. session多服务器共享的方案

    session的存储了解以前是怎么做的,搞清楚了来龙去脉,才会明白进行共享背后的思想和出发点.我喜欢按照这样的方式来问(或者去搞清楚):为什么要session要进行共享,不共享会什么问题呢? php中 ...

  4. A low-cost wear-leveling algorithm for block-mappingsolid-state disks

    [] Li-Pin Chang,Li-Chun Huang.A low-cost wear-leveling algorithm for block-mapping solid-state disks ...

  5. 【转】RAM 大全-DRAM, SRAM, SDRAM的关系与区别

    http://blog.csdn.net/huleide/article/details/5506698 ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是R ...

  6. 【Java学习笔记之三十四】超详解Java多线程基础

    前言 多线程并发编程是Java编程中重要的一块内容,也是面试重点覆盖区域,所以学好多线程并发编程对我们来说极其重要,下面跟我一起开启本次的学习之旅吧. 正文 线程与进程 1 线程:进程中负责程序执行的 ...

  7. Spring 为Bean对象执行初始化和销毁方法

    1)初始化: ①可以利用<bean>元素的init-method="方法名"属性指定初始化方法. ②指定的初始化方法是在构造方法调用后自动执行.若非单例模式,则每创建一 ...

  8. HttpComponents 发送post get 请求

    1.场景描述 使用Apache开源组织中的HttpComponents,完成对http服务器的访问功能. 2.HttpComponents项目的介绍 HttpComponents项目就是专门设计来简化 ...

  9. (MariaDB)MySQL内置函数大全

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  10. PHP设计模式一:工厂方法设计模式

    一.什么是工厂方法模式 作为一种创建型设计模式,工厂方法模式就是要创建“某种东西”.对于工厂方法,要创建的“东西”是一个产品,这个产品与创建它的类之间不存在绑定. 实际上,为了保持这种松耦合,客户会通 ...