获取移动端 touchend 事件中真正触摸点下方的元素
移动端的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 事件中真正触摸点下方的元素的更多相关文章
- 关于如何获取移动端 touchmove 事件中真正触摸点下方的元素
移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是t ...
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- html .css 实现图片滑动和自动播放特效移动端 HTML 5中添加了以touch 开头的事件
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta ...
- 移动端开发touchstart,touchmove,touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...
- 浅析iOS中的触摸事件
一.什么是响应者对象? 在 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象”.UIApplication.UIViewControl ...
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
项目开发中的一些注意事项以及技巧总结 1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...
随机推荐
- JAVA 框架hibernate (三)(数据库更新丢失)
一.场景: 我们在并发操作数据库同一个字段,比如:name:tom age:22这条数据.有2个同时进行操作.A操作该数据的name改成admin,B操作这条数据的age改成:35.然后A先把数据更 ...
- 装饰器 python 你也可以叫语法糖
1.最简单的装饰器不带入参 def func(): pass def decorate(func) def wrapper(): return func() return wrapper 使用 @ ...
- overflow的使用
<div id="topFieldDiv" style="width: 650px; height: 150px; overflow-y: hidden" ...
- 几个PHP读取整个文件的函数readfile()、fpassthru()和file()
2.7.4 读取整个文件:readfile().fpassthru()和file()除了可以每次读取文件一行外,还可以一次读取整个文件.PHP提供了4种不同的方式来读取整个文件.第一种方式是rea ...
- Codeforces Round #503 Div1+Div2 1019&1020
https://winniechen.cn/?p=188 这个还是直接放链接吧,毕竟内容比较多...
- MSF里MS17_010利用模块笔记
1. auxiliary/scanner/smb/smb_ms17_010 //扫描检测漏洞辅助模块 扫描结果这里可以看到 2,3,4这几台主机存在此漏洞! 2. auxilia ...
- WPF编程,通过Path类型制作沿路径运动的动画一种方法。
原文:WPF编程,通过Path类型制作沿路径运动的动画一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/de ...
- PX Deq: Execution Msg 等待事件
可参考 MOS文档: WAITEVENT: "PX Deq Credit: send blkd" (Doc ID 271767.1) P1 = sleeptime/senderid ...
- SSISDB4:当前正在运行的Package及其Executable
SSISDB 系列随笔汇总: SSISDB1:使用SSISDB管理Package SSISDB2:SSIS工程的操作实例 SSISDB3:Package的执行实例 SSISDB4:当前正在运行的Pac ...
- Android Studio Xposed模块编写(二)
阅读本文前,假设读者已经看过Android Studio Xposed模块编写(一) 相关环境已经搭建完成.本文演示案例与上文环境一致,不在赘述. 1.概述 Xposed是非常牛叉的一款hook框架 ...