移动端的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. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

  2. Appium python自动化测试系列之移动自动化测试前提(一)

    1.1 移动自动化测试现状 因为软件行业越来越发达,用户的接受度也在不断提高,所以对软件质量的要求也随之提高,当然这个也要分行业,但这个还是包含了大部分.因为成本.质量的变化现在对自动化测试的重视度越 ...

  3. Apache配置腾讯云SSL证书指引

    一.安装Apache 1) 使用yum安装Apache # yum install httpd 2) 修改测试页面 # vim /var/www/html/index.heml PS:修改为测试内容, ...

  4. win10 uwp DataContext

    本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...

  5. Maven优雅的添加第三方Jar包

    在利用Maven构建项目的时候会出现某些Jar包无法下载到本地的Repository中,鉴于这种情况比较普遍存在,特归纳以下解决问题办法:以 ojdbc14-10.2.0.4.0.jar为例[其它Ja ...

  6. vue2.0 练习项目-外卖APP(1)

    前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...

  7. [BC]Four Inages Strategy(三维空间判断正方形)

    题目连接 :http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=577&pid=1001 题目大意:在三维空间中, ...

  8. 安利一波那个叫做 hutool 的通用工具类库

    摘自3.1.1版本作者发布原话,当时看到有点说不上的情绪,为作者的坚持.热爱点个赞. 已经想不起来是怎样结识 Hutool 的,但 Hutool 伴随几个项目的推进,获得了同事一致好评. 没经过实践和 ...

  9. python参考手册一书笔记之第一篇上

    在python2和python3的版本差异很大输出hello world的方法在2里支持在3里就不支持了. print 'hello world' #在2中支持 print ('hello world ...

  10. 为什么使用 Bootstrap

    移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式 浏览器支持:所有的主流浏览器都支持 Bootstrap 容易上手:只要您具备 HTML 和 CSS 的基础知识 ...