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

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

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

 document.addEventListener('touchend', function(e) {
var event = e || window.event;
var element = document.elementFromPoint(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
console.log(element);
}, false);

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

  1. 关于如何获取移动端 touchmove 事件中真正触摸点下方的元素

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

  2. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  3. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

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

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

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

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

  6. 移动端开发touchstart,touchmove,touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  7. 浅析iOS中的触摸事件

    一.什么是响应者对象? 在 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象”.UIApplication.UIViewControl ...

  8. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

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

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

随机推荐

  1. Python2.7-xdrlib

    xdrlib模块,用于打包和解包 xdr 数据.XDR 提供了一种与体系结构无关的表示数据,解决了数据字节排序的差异.数据字节大小.数据表示和数据对准的方式.使用XDR的应用程序,可以在异构硬件系统上 ...

  2. JavaScript 删除数组中的对象

    1.获得对象在数组中的下标 function (_arr,_obj) { var len = _arr.length; for(var i = 0; i < len; i++){ if(_arr ...

  3. C. Permutation Cycle

    For a permutation P[1... N] of integers from 1 to N, function f is defined as follows: Let g(i) be t ...

  4. day 11 前方高能-迭代器

    第一类对象 -----函数名  == 变量名 函数对象可以像变量一样进行赋值 还可以作为列表的元素进行使用 可以作为返回值返回 def wrapper():     def inner():      ...

  5. 03-Python执行方式和Pycharm设置

    https://www.python.org/ 单词列表 * error 错误 * name 名字 * defined 已经定义 * syntax 语法 * invalid 无效 * Indentat ...

  6. 20155321 《网络攻防》 Exp9 Web安全基础

    20155321 <网络攻防> Exp9 Web安全基础 基础问题 SQL注入攻击原理,如何防御 原理:在事先定义好的SQL语句的结尾上添加额外的SQL语句(感觉一般是或上一个永真式),以 ...

  7. 关于Trie的一些算法

    最近学习了一下关于Trie的一些姿势,感觉很实用. 终于不用每次看到字符串判重等操作就只想到hash了 关于Trie的定义,来自百度百科 在计算机科学中,Trie,又称前缀树或字典树,是一种有序树状的 ...

  8. CS229笔记:生成学习算法

    在线性回归.逻辑回归.softmax回归中,学习的结果是\(p(y|x;\theta)\),也就是给定\(x\)的条件下,\(y\)的条件概率分布,给定一个新的输入\(x\),我们求出不同输出的概率, ...

  9. 用 IIS 搭建 mercurial server

    mercurial server 对于代码管理工具,更多的人可能对 Git 更熟悉一些(Git太火了).其实另外一款分布式代码管理工具也被广泛的使用,它就是 mercurial.当多人协作时最好能够通 ...

  10. CM005-逆向分析过程(上篇)

    前言 005,都说比较变态,很多人给放过去了,但是我还是决定上了它,既然变态就分两篇,上篇先实际说流程,到底应该怎么上它,下篇会告诉逆向分析的过程和方法 准备 [环境和工具] win7/xp虚拟机环境 ...