移动端的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. 向jupyter notebook加入Anaconda3中已添加的虚拟环境kernel

    # jupyter notebook添加Anaconda虚拟环境的kernel #  开启虚拟环境 (base) C:\Users\jiangshan>activate tensorflow # ...

  2. SVN 错误收集

    一.the working copy is locked due to a previous error 解决办法:在 Cornerstone 右键本地工程 --> clean.

  3. 从CMDB动态获取服务器列表,按照Ansible的约定

    目标效果: [root@ansible ~]# python query.py --list{ "test": [ "10.1.2.1", "10.1 ...

  4. 二,ESP8266 GPIO和SPI和定时器和串口(基于Lua脚本语言)

    https://www.cnblogs.com/yangfengwu/p/7514336.html 我们写lua用这个软件 如果点击的时候提示安装,,安装就行,,如果没有提示呢可以,按照下面链接的提示 ...

  5. Alamofire请求网络

    HTTP - GET和POST请求- 如果要传递大量数据,比如文件上传,只能用POST请求- GET的安全性比POST要差些,如果包含机密/敏感信息,建议用POST- 如果仅仅是索取数据(数据查询), ...

  6. tomcat-在eclipse中配置tomcat容器的内存

    eclipse下的tomcat内存设置大小 在eclipse中设置: 设置步骤如下: 1.点击eclipse上的debug图标旁边的下拉箭头 2.然后选择Run Configurations, 3.系 ...

  7. springboot的热部署和dubug

    采用了项目聚合,产生一些不同,遇到的问题和解决方法分享下. 项目结构: rebuilder2 -htran 主项目 -htran-api 1.htran.pom <parent> < ...

  8. Ms.office2010安装教程

    下面用到的软件下载地址如下:http://pan.baidu.com/s/1c08cxPI 第一步 1. 将压缩包office2010.rar解压解压后,会出现一个office2010文件夹如图1.1 ...

  9. 【python笔记】使用matplotlib,pylab进行python绘图

    一提到python绘图,matplotlib是不得不提的python最著名的绘图库,它里面包含了类似matlab的一整套绘图的API.因此,作为想要学习python绘图的童鞋们就得在自己的python ...

  10. 基于HTTPS的中间人攻击-BaseProxy

    前言 在上一篇文章BaseProxy:异步http/https代理中,我介绍了自己的开源项目BaseProxy,这个项目的初衷其实是为了渗透测试,抓包改包.在知识星球中,有很多朋友问我这个项目的原理及 ...