移动端的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. JAVA框架 Spring AOP注解

    一.准备工作: 1)导入jar包: 4个jar包. 2)约束:(spring需要所有的约束)有IOC约束和AOP 还有事务(tx)以及注解注入的约束(context). <?xml versio ...

  2. TM1629A驱动程序

    网上看了很多1629驱动程序,很乱,下载了几个整合了一下,下面的程序还没有烧录到开发板里面测试,程序已经做好了,但是这个方案老板不做了,所以只能在这里放着了,留着以后用吧 void TM1629A_W ...

  3. Vue复选框的全选

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

  4. kubernetes 生命周期问题分析

    1.Failed  -- pod里至少一个容器以非0code退出,说明应用有问题,需要debug应用容器 2.pending -- 说明API对象已经被创建和保存在etcd数据库里,但是创建过程出了问 ...

  5. jqgrid 主键列的设定

    1.如果需要对jqgrid表格数据有互动操作,需要设定主键列. 2.主键列的作用为:在进行jqgrid表格数据交互(编辑.新增.删除行)时,是通过主键列的值来作为引导值来的. 3.注意:不要给一个jq ...

  6. [NOI2003]Editor & [AHOI2006]文本编辑器editor BZOJ1507&BZOJ1269

    分析: Splay区间操作裸题,维护出区间信息,按照要求模拟,注意读入格式,并且考虑内存回收(开不下) 附上代码: #include <cstdio> #include <algor ...

  7. Java技术——String类为什么是不可变的

    0. 前言   如果一个对象,在它创建完成之后不能再改变它的状态,包括对象内的成员变量.基本数据类型的值等等.那么这个对象就是不可变的.众所周知String类就是不可变的.转载请注明出处为SEU_Ca ...

  8. Caffe学习系列——工具篇:神经网络模型结构可视化

    Caffe学习系列——工具篇:神经网络模型结构可视化 在Caffe中,目前有两种可视化prototxt格式网络结构的方法: 使用Netscope在线可视化 使用Caffe提供的draw_net.py ...

  9. [CF1067D]Computer Game[凸包/斜率优化+倍增+矩阵乘法]

    题意 你有 \(n\) 个任务,初始收益为 \(a\) ,共 \(t\) 轮游戏,每轮可以选择完成一个任务(可以做多次),完成之后可以给任意任务升级,升级之后的任务收益为 \(b\) ,每个任务还有完 ...

  10. Egret(白鹭引擎)——“TypeError: Cannot read property 'asCom' of null”

    前言 相信我,这个错误新手都不陌生:TypeError: Cannot read property 'asCom' of null 还有,一定要看我上一篇,哦不(人家应该是报了这个错,才找到看到这篇文 ...