移动端touch事件影响界面click/超链接事件无法点击

触摸事件:

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

1.touchstart：手指放在一个DOM元素上。

2.touchmove：手指拖曳一个DOM元素。

3.touchend：手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表：

1.touches：当前位于屏幕上的所有手指的一个列表。

2.targetTouches：位于当前DOM元素上的手指的一个列表。

3.changedTouches：涉及当前事件的手指的一个列表。

例如，在一个touchend事件中，这就会是移开的手指。

这些列表由包含了触摸信息的对象组成：

1.identifier：一个数值，唯一标识触摸会话（touchsession）中的当前手指。

2.target：DOM元素，是动作所针对的目标。

3.客户/页面/屏幕坐标：动作在屏幕上发生的位置。

4.半径坐标和rotationAngle：画出大约相当于手指形状的椭圆形。

这两天自己在做一个移动端APP，要用到滑动触发动画的效果，做完之后发现滑动和动画可以顺利完成，但是页面其他的超链接和click点击事件却无法点击了，用到的库是zepto和vue。

之后排查发现问题可能是出在event事件中，就把touchstart和touchend事件的默认行为取消了(e.preventDefault()),取消后发现可以点击了，但是滑动效果大打折扣了，从右边滑动回左边的时候效果非常差，然后就上百度查，发现有一篇文章

https://www.cnblogs.com/lvmingyin/p/5372678.html

之后把阻止默认行为添加到touchmove 就OK了。

相关的文章地址: http://caibaojian.com/mobile-touch-event.html

转载于:https://www.cnblogs.com/LeBron-James/p/7811405.html

移动端touch事件影响界面click/超链接事件无法点击相关推荐

【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
文章目录事件认识事件事件绑定 - DOM 0级事件 - DOM 2级事件(事件侦听器事件监听) 事件解绑解绑dom0级事件解绑dom2级事件常见的事件类型 1. 鼠标事件 click ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
android touch事件无反应,移动端touch事件
当用户手指放在移动设备在屏幕上滑动会触发的touch事件 webkit: touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 touchmove--当手指在屏幕上滑动时连续触发.通常 ...
移动端web，tap与click事件
一.tap与click的区别两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...
搞定移动端一(移动端 touch 事件，TouchEvent 对象)
移动端事件 1.目标掌握移动端 touch 事件使用掌握 touch 事件和 mouse 事件的区别掌握 touchEvent 实现移动端幻灯片 2.移动端touch事件 touchstart ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
移动端 touch事件过渡事件动画事件
移动端首先要书写meta标签 <meta type="viewport" content="width=device-width,user-scalable=no, ...

移动端touch事件影响界面click/超链接事件无法点击

移动端touch事件影响界面click/超链接事件无法点击相关推荐

最新文章

热门文章