js实现锚点导航,类似手机通讯录,在手指触摸相应字母时,通讯录自动滚动到相应首字母的联系人

类似手机通讯录,在手指触摸相应字母时,通讯录自动滚动到相应首字母的联系人。
这边通过需求分析,很容易联想到,使用touchstart和touchmove这两个方法来处理响应操作,touchstart比较简单就不说了,监听touchmove事件时,发现一个问题,当我无论如何在监听元素上移动我的手指,所返回的event.touches[0].target永远指向第一个触摸元素的event对象,而不会指向我当前手指所触摸的元素。
这也就意味着我无法通过回调返回的event来获取当前手指触摸的元素。
在这里插入图片描述

我们通过touchmove事件返回的event对象,可以获取当前手指触摸元素的clientX和clientY的值,将值传入document.elementFromPoint就可获取当前触摸的值,这里需要注意的是此方法返回的是最顶层的Dom,所以务必将你需要的Dom的z-index设置为最高。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值