关于浏览器touch事件的问题
来源:互联网 发布:淘宝网纱巾 编辑:程序博客网 时间:2024/06/16 08:57
此文为本人原创,如若雷同,纯属巧合!欢迎转载,转载请注明出处,谢谢!
遇到的问题及测试
在项目过程中,封装touch事件时,发现了touch事件与mouse等事件的一些区别,且touch事件在某情况下不会触发touchend,上测试代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> #div{ width: 400px; height: 400px; background-color: red; } #divchild{ width: 200px; height: 200px; background-color: blue; } </style></head><body onselectstart ="return false;" onmousedown="return false;" oncontextmenu= "return false;"> <div id='div'><div id='divchild'></div></div> <script> window.onload = function(){ var div = document.getElementById('div'); var child = document.getElementById('divchild'); div.addEventListener('touchstart',function(e){ setTimeout(function(){ child.remove(); },1000); console.log('触发了touchstart'); console.log(e.target); }); div.addEventListener('touchend',function(e){ console.log('触发了touchend'); console.log(e.target); }); } </script></body></html>
测试浏览器:chrome56;
1.测试方式:首先点击蓝色区域并保持长按,待蓝色区域消失时停止长按,会发现touchend事件并没有触发;
2.刷新,按照步骤1的方式点击红色区域,触发touchend事件;
3.将Demo中touchestart touchend分别替换为mousedown及mouseup,再进行步骤1 2,在移动端模式和非移动端模式(不知道该不该这样称呼,见谅)mouse事件有着不一样的结果,非手机模式下两个事件都正常触发,但移动端模式下,mouseup事件长按始终不会触发(短按会触发,未使用安卓系统测试),此行为让我感觉很怪异,个人判断可能与移动端click事件300ms延迟有关系;
touch测试结果
touch测试结果
mouse测试结果
mouse测试结果
关于touch事件行为的测试结果:
从测试可以看出,在demo中,若touchend触发前将e.target元素删除,将终止touch后续事件(touchmove touchend)的触发(原因应该是target被删除无法捕获或冒泡到监听元素),可得出touchstart touchmove touchend三个事件为联动事件(自己起的名字),这三个事件(或许还有一个touchcancel)共用一个target,即在事件触发前并不会重新获取target,沿用上一个事件的target;而在非移动端的mousedown及mouseup事件为独立事件(自己起得名字)–应该会在触发前重新获取target,而在移动端测试下行为个人认为颇为怪异,想不明白,只是认为可能和click的300ms延迟有关系。
由于本人才疏学浅,若存在错误欢迎批评指正,在此不胜感激!
- 关于浏览器touch事件的问题
- 关于Touch事件的传递问题
- 关于android touch事件的传递问题
- 关于click事件与touch事件冲突的问题
- 关于 Touch事件和Click事件的冲突问题
- 关于touch事件优先级问题。
- 关于控件touch事件的整理
- 关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题
- 关于touch事件分发
- touch,keydown事件遇到的问题
- android-----touch事件的层级传递问题
- Cocos2dx Lua 关于Touch事件传递阻止下层传递的问题
- 关于浏览器事件的思考
- 关于浏览器的问题
- 关于ios8之后touch Id的问题
- 关于Android的Touch事件的分发机制
- 关于view的Touch事件的一些理解
- cocos2dx3.2关于cocos studio中button的touch事件
- (转)Flex 布局教程:语法篇
- Project interpreter not specified(eclipse+pydev)
- 用Delphi7 调用.NET 2.0的WebService 所要注意的问题
- 机器学习入门——神经网络深入
- mysql-update、delete、select操作
- 关于浏览器touch事件的问题
- c++学习之路1
- PAT BASIC 1015 德才论
- Swift第一周~ Boolan笔记
- 搜索框的键盘搜索键点击回调(软件盘)
- Android 多线程 AsyncTask的使用
- Leetcode 368. Largest Divisible Subset
- html是什么,html5是什么?web开发必备知识之html
- 矩阵元素相乘