html5(移动端)触摸点位置获取

在移动端使用html5的触屏事件主要就是为了解决灵敏度的问题传统的js或者jquery有的时候在移动端灵敏度是不行的。
-------------------------
主要是三个事件:touchstart、touchmove、touchend
touchstart:手指头触摸屏幕上的事件
touchmove:手指头在屏幕上滑动触发的事件
touchend:当手指从屏幕上离开的时候触发
利用jquery配合使用方法如下:
$("#demoid").bind('touchstart',function(){ //代码处理});
---------在移动端用到最多的出就是触碰点的获取我们就讲讲触碰点问题:
那么先说明pc端,在pc端直接使用e.pageX和e.pageY进行获取就完全ok了但是
在移动端是无法识别这个东西的,而且在不同的事件下获取鼠标的触碰点还是
不同的,下面详细介绍在touchstart、touchmove、touchend三种事件下的鼠标
位置点获取:
(1)touchstart事件下获取:e.originalEvent.targetTouches[0].pageX
说明:由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的
意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以
e.originalEvent.targetTouches[0],所以位置.pageX .pageY就ok了
(2)touchmove事件获取:这个和(1)的获取方式是一样的就不多说了
(3)touchend事件的获取:e3.originalEvent.changedTouches[0].pageX 
下面是其他的一些介绍:
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用touchstart、touchmove和touchend事件来实现移动端触摸左右滑动切换图片。下面是一个简单的示例代码: HTML代码: ```html <div class="slider"> <ul> <li><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> </ul> </div> ``` CSS代码: ```css .slider { position: relative; overflow: hidden; } .slider ul { list-style: none; padding: 0; margin: 0; width: 300%; position: relative; } .slider li { float: left; width: 33.333%; } .slider img { width: 100%; height: auto; } ``` JavaScript代码: ```javascript $(function() { var slider = $('.slider'); var sliderUl = slider.find('ul'); var sliderLi = sliderUl.find('li'); var sliderImg = sliderLi.find('img'); var count = sliderLi.length; var currentIndex = 0; var startX = 0; var endX = 0; sliderImg.on('dragstart', function(event) { event.preventDefault(); }); sliderUl.on('touchstart', function(event) { startX = event.originalEvent.touches[0].pageX; }); sliderUl.on('touchmove', function(event) { endX = event.originalEvent.touches[0].pageX; if (endX - startX > 50) { currentIndex--; if (currentIndex < 0) { currentIndex = count - 1; } move(currentIndex); } else if (endX - startX < -50) { currentIndex++; if (currentIndex >= count) { currentIndex = 0; } move(currentIndex); } }); function move(index) { var left = -index * 100 / 3 + '%'; sliderUl.animate({ 'left': left }, 300); } }); ``` 代码解释: 1. 首先获取slider、sliderUl、sliderLi和sliderImg等元素,并且获取sliderLi的个数count和当前图片的索引值currentIndex。 2. 然后给sliderImg绑定dragstart事件,防止图片在移动时出现拖拽效果。 3. 接着给sliderUl绑定touchstart和touchmove事件,分别在手指按下和移动时记录开始位置和结束位置,并且判断是向左滑动还是向右滑动。 4. 最后调用move函数来切换图片,通过动态计算sliderUl的left值来实现移动效果。 5. 在move函数中,计算left值需要用到currentIndex,而currentIndex的值在向左或向右滑动时已经被修改了,因此需要传入参数index来表示要切换到的图片索引值。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gjanuary

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值