移动端的点击事件

港控/mmm° 2022-11-12 01:44 166阅读 0赞

[https://blog.csdn.net/qq\_41614928/article/details/92058822][https_blog.csdn.net_qq_41614928_article_details_92058822]

一、基础事件

### 1、PC端事件 ###

onclick 鼠标点击触发  
onmousedown 鼠标按下触发  
onmousemove 鼠标移动触发  
onmouseup 鼠标抬起触发

### 2、移动端触屏事件 ###

ontouchstart 手指按下触发  
ontouchmove 手指移动触发  
onTouchend 手指抬起触发

div.addEventListener('touchstart',function(e)\{ console.log(e) \}) // 不加on

### 3、PC端事件和移动端事件的区别 ###

通过on的方式添加touch事件在谷歌模拟器下无效  
通过on的方式添加事件会前后覆盖  
鼠标事件在移动端可以使用，但有300毫秒的延迟

### 4、事件监听 ###

1 addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定  
2 绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题  
3 在谷歌模拟器下一直识别  
4 冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行  
5 捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行

### 5、event对象 ###

1 标准事件函数默认的第一个参数  
2 是描述发生事件的详细信息

### 6、阻止默认事件 ###

1 事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情  
2 比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等  
3 e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象  
4 但网页上的所有滚动条失效  
5 一般不会阻止默认

### 7、阻止冒泡 ###

1 在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时需要复制文本

### 8、事件点透问题 ###

a) PC端鼠标事件,在移动端也可以正常使用，事件的执行会有300毫秒的延迟  
b) 问题的产生是，点击了页面之后，浏览器会记录点击下去的坐标  
c) 300毫秒之后，在该坐标找到现在的元素，执行该事件

### 9、点透问题解决办法 ###

a) 阻止默认事件，但在部分安卓机不支持  
b) 不用a标签做页面跳转，用window.location.href做跳转，比如移动端淘宝  
c) 在移动端不用鼠标事件

### 10、防止误触问题 ###

1 用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转

### 11、获取手指信息 (多指触碰) ###

2 touches 当前屏幕上的手指列表  
3 targetTouches 当前元素上的手指列表  
4 changedTouches 触发当前事件的手指列表 (移动端多用这个事件对象)  
5 获取手指的个数 e.changedTouches.length  
6 获取坐标 e.changedTouches\[0\].pageX

### 12、手指对象的区别 ###

1 在touchend的时候想要获取手指列表，只能用changedTouches  
2 原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches

div.addEventListener('touchstart',function(e)\{  
            console.log(e)  
            var touch = e.changedTouches\[0\];  
            console.log(‘x:’,.touch .pageX)  
        \})

[https_blog.csdn.net_qq_41614928_article_details_92058822]: https://blog.csdn.net/qq_41614928/article/details/92058822