首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js移动touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。 它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...触摸事件已被取消 每当一个触摸事件发生,会触发一个触摸事件: const link = document.getElementById('my-link') link.addEventListener...('touchstart', event => { // touch event started }) 以下是我们可以访问该事件的所有属性: identifier 标识符此特定事件的唯一标识符。...用于跟踪多点触摸事件。相同的手指=相同的标识符。

8.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS篇(028)-移动 click 事件touch 事件、tap 事件的区别

    参考答案: 1.click 事件在移动会有 200-300ms 的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的 200-300ms 之后,才触发 click,...2.touch 事件是针对触屏手机上的触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件的监听,让开发者可以获取用户触摸屏幕时的一些信息。...mouseover mouseup 的触发 3.tap 事件在移动,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生的,所以是封装的...document.getElementById('btn'); tap(btn, function() { alert('taped'); }); 拓展: 点透问题 如果我们在移动所有的...,所以,触发了下面的 a 的 click 事件,注意: 我们认为 a 标签默认是绑定了 click 事件的。

    6.2K40

    【移动touch事件及穿透事件

    苹果的解决方案: 方案一:双指进行缩放 方案二:在屏幕上双击进行放大(单击300ms后,再单击才算双击),造成了,移动端点击事件,300ms 延迟的问题 解决方案,就是使用touch事件来替代 移动新增...touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel:touch 取消,如来电等...【扩展】:移动touch、click、tap的区别 http://t.zoukankan.com/luo1240465012-p-9450627.html 添加touch 事件 代码如下: <script...点击穿透现象的情况: 1) 蒙层问题 蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件touch事件触发后,蒙层消失,300ms后这个点的click事件触发。...e.preventDefault(); 方法二:吃掉touch之后的click, 使用计时器,让touch后延迟350ms再隐藏蒙层 方法三:使用fastclick.js;可以直接写click事件

    2K10

    「移动touch事件,touchEvent对象

    touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...touch事件只能在移动使用,mouse :事件只能在 PC 使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕的任意位置执行。...touches - 当前屏幕上的手指触摸 touch 列表。 changedTouches - 触发当前事件的触摸 touch 列表。...二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。 单点触发,指的一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机banner滑动切换等。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc运行的时候,没有触摸设备可以使用鼠标代替。

    1.2K30

    【如果你要学JS XIV】—— 移动常用事件-移动touch触摸事件

    导绪移动浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...console.log('我摸够了'); }) 2.触屏事件TouchEvent是一类描述手指在触摸平面 (触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣,targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个DOM元素

    53100

    「移动touch事件,touchEvent对象

    touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...touch事件只能在移动使用,mouse :事件只能在 PC 使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕的任意位置执行。...touches - 当前屏幕上的手指触摸 touch 列表。 changedTouches - 触发当前事件的触摸 touch 列表。...二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。 单点触发,指的一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机banner滑动切换等。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc运行的时候,没有触摸设备可以使用鼠标代替。

    2K20

    「移动touch事件,touchEvent对象

    touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 事件与mouse事件区别: touchstart:手指按下,mousedown:鼠标按下。...touch事件只能在移动使用,mouse :事件只能在 PC 使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕的任意位置执行。...touches - 当前屏幕上的手指触摸 touch 列表。 changedTouches - 触发当前事件的触摸 touch 列表。...二、触摸分类 很多情况下触摸事件会分为两种,单点触发和多点触发。 单点触发,指的一个指头在屏幕触摸、滑动,主要应用在下拉刷新,手机banner滑动切换等。...很多情况下,触摸事件跟鼠标事件会同时触发,目的是为了在pc运行的时候,没有触摸设备可以使用鼠标代替。

    1K30

    移动touch事件无视disabled属性 转

    发现click没有事件没有触发,而touch事件依然触发。...接着,我把问题简化,移除Angular 和 hammerjs,只使用jquery绑定touch事件,发现依然不会触发touch事件,上个类似我当时使用的 实验代码。...发现去掉btn-default后,还是不触发touch事件,再去掉btn就恢复到了上个demo的情况了。...回忆一下,很早前就看到过这个属性,不过当时并没有进入到移动的开发领域,对它的作用并没有过多关注。...又是IE拖后腿了囧,不过移动表现良好~ 总结 pointer-events这个CSS3属性,在移动我们基本可以“放肆”的使用,在你需要禁用某个元素事件或某个区域事件的时候,可以考虑下这个属性,简单高效

    2.3K20

    移动touch拖动事件和click事件冲突问题解决

    实现效果 类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果 可以点击拖动,然后吸附在窗口边缘 点击悬浮球,可以跳转界面,或者更改悬浮球的形态 准备 移动使用 touch事件类型: touchstart...多点触控 TouchEvent.targetTouches 只读 一个 TouchList 对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点...触摸元素横坐标 event.targetTouches.clientY // 触摸元素纵坐标 TouchEvent.touches 只读 一个 TouchList 对象,包含了所有当前接触触摸平面的触点的 Touch...问题 当给元素添加了touch事件之后,click事件就不会出发了,那么怎么模拟点击效果呢?...在touchmove事件中增加一个是否移动过的标记isMoved: true 在touchend事件中判断isMoved是否为true,是true则按原有逻辑执行,是false则说明没有移动过

    2.2K20

    简述android触屏事件的处理_移动touch事件有哪些

    scroll event touch event 对触屏设备,当用户用手指或触控笔在设备屏幕上操作时会产生触屏事件touch event)。...触屏事件序列 在Android系统中,从手指按到屏幕上开始,到手指离开屏幕,这个过程中产生的一系列触屏事件构成了一个事件序列(也可以称为事件流)。...但是需要注意的是,产生了一个MotionEvent对象并不表示这一定是一个触屏操作,MotionEvent不仅可以用来表示touch event,还可以表示hover event,scroll event...在一个触屏事件序列的多个事件中,同一个pointer拥有相同的id,但是index可以不同。 这里只讨论MotionEvent中关于touch event的部分。...ACTION_CANCEL 这个事件比较特殊,它和上述事件都不一样,上述事件都是由用户在屏幕上操作所触发的,但是这个事件是由系统自动产生的。当一个事件序列需要提前终止的时候由系统自动产生此事件

    1.3K10

    Touch 移动设备上的 手势识别 与 Js事件

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。...Touch.js对于网页设计师来说,是一款不错的辅助工具,可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感,而且在节约时间,减少人力投入也有极大的帮助。...pinch: true, //pinch类事件开关 } 百度touch.js可以说是Web移动touch点击事件不错的解决方案,搭配zepto.js或者jQuery...使用起来解决了移动click点击事件300ms的延迟问题。...百度官方touch.js的说明文档,详见:http://cloudajs.org/docs/step4_API_Documentation#h2_7 Touch.js上手还是很容易的,语法: touch.on

    4.1K40

    移动前端常见的触摸相关事件touch、tap、swipe等整理

    前端的很多事件在PC和浏览器可公用,但有些事件却只在移动产生,如触摸相关的事件 本文整理了移动常见的一些事件,包括原生支持的click、touch、tap、swipe事件,也有定义型的gesture...手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到 一、事件定义及分类 1. click事件 单击事件,类似于PC的...click,但在移动中,连续click的触发有200ms ~ 300ms的延迟 2. touch事件 触摸事件,有touchstart touchmove touchend touchcancel...第三方插件监听 1) 使用jquery   为了查看三个属性的区别,简单地只监听一个事件 $('.one, .two, #test'...2) 改用zepto.js正常 ? 看第五次的touch ? 看第二次的touch ? 看第四次的touch ?

    2.1K20

    移动touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。...做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。...之后我大胆推测了一下: 会不会是因为在移动click事件的触发条件就是必须touchstart和touchend同时触发才能触发click呢?...所以页面无法滚动了,之后又去找找找,找了很久一直没找到怎么解决这个问题,突然想起之后用的一个移动的图片轮播插件, 为什么他们可以左右滑动,不影响click事件和a标签,也不影响页面的滚动。...总结一下: 在QQ和微信(当然还包括其他浏览器,不过我没测试过)中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()

    3.2K20

    从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动常用插件

    一、touch事件的缺陷 我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。...但是呢,touch 事件并不是完美的,不管是我们自己封装的 tap 事件,还是 zepto 自带的 tap 事件,在移动都有一个致命的缺陷,就是“点透”。 什么是“点透”呢?...触发这两个事件的顺序是 tap 事件,然后是 click 事件。因为 tap 事件内部是 touch 事件处理的,而 touch 事件是先于 click 事件触发的。...这个时候,我们既想无延时,又不想触发点透效果,而且有的时候,我们希望我们的网页不仅可以在移动访问,在 PC 模式下也可以访问,但是 tap 事件只能在移动使用,所以只能用 click 事件,但是 click...我们知道, touch 事件只能在移动使用,这个我们无法改变,所以我们只能改变延时的问题,于是我们就引入了 "fastclick.js" 库文件,解决 click 的延时问题。

    3.2K20
    领券