移动端的点击事件

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)
        })

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值