移动端的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. $Simpson$积分入门

    \(\rm{0x01}\) 前言 首先阐明一点,自适应辛普森算法(\(\rm{Adaptive ~Simpson's~ rule}\) )是一类近似算法(\(\rm{Approximation ~al ...

  2. 蓝桥杯之 2n皇后问题(双层dfs,暴力)

    Description 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后 和n个白皇后,使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两 个白皇后都不在同 ...

  3. 大数据入门第二十二天——spark(三)自定义分区、排序与查找

    一.自定义分区 1.概述 默认的是Hash的分区策略,这点和Hadoop是类似的,具体的分区介绍,参见:https://blog.csdn.net/high2011/article/details/6 ...

  4. 20155301 Exp4 恶意代码分析

    20155301 Exp4 恶意代码分析 实践目标 (1) 是监控你自己系统的运行状态,看有没有可疑的程序在运行. (2) 是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用 ...

  5. 【WPF】WPF截屏

    原文:[WPF]WPF截屏 引言 .NET的截图控件在网上流传得不多啊,难得发现一个精品截图控件( 传送门),但是无奈是winform的.后来又找到一个周银辉做的WPF截图(继续传送门),发现截屏是实 ...

  6. IIS发布问题

    下午发布一个IIS ,出现一个很奇葩的问题,在本地跑代码运行都正常,但是发布到IIS上后 访问提示: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framewo ...

  7. LSTM生成尼采风格文章

    LSTM生成文本 github地址 使用循环神经网络生成序列文本数据.循环神经网络可以用来生成音乐.图像作品.语音.对话系统对话等等. 如何生成序列数据? 深度学习中最常见的方法是训练一个网络模型(R ...

  8. python中获取执行脚本路径方法

    1.sys.path[0]:获取执行脚本目录绝对路径 #每次执行脚本时,python会将执行脚本目录加入PYTHONPATH环境变量中(sys.path获取) #!/usr/bin/python3 i ...

  9. [LOJ#6068]. 「2017 山东一轮集训 Day4」棋盘[费用流]

    题意 题目链接 分析 考虑每个棋子对对应的横向纵向的极大区间的影响:记之前这个区间中的点数为 \(x\) ,那么此次多配对的数量即 \(x\) . 考虑费用流,\(S\rightarrow 横向区间 ...

  10. 设计模式 笔记 单例模式 Singleton

    //---------------------------15/04/09---------------------------- //Singleton 单例模式-----对象创建型模式 /* 1: ...