文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端成神之路-WebAPIs06

5.鼠标不经过轮播图，轮播图也会自动播放图片。 ​ 6.鼠标经过，轮播图模块， 自动播放停止。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲： （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置...（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

1.3K40

jimojianghu

触控板 要禁止触控板的缩放行为，需要处理鼠标滚轮事件：wheel 。 因为笔记本触摸板双指滑动，将响应该事件，如果对该事件阻止默认行为，就能解决缩放问题了。...要禁止触摸屏的手指缩放，可以使用如下的 CSS 和 JS 两种方法。...js 处理 使用js代码来禁止触摸屏的手指缩放，和处理触控板类似的，这里主要是监听几个手势事件，touchstart, touchend, touchmove等。...笔记本触摸板双指滑动，将响应滚轮事件，因此可以监听该事件，禁止触摸板手指缩放界面。 但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。...添加 passive 参数为true后，touchmove 事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）。

3.8K00
您找到你想要的搜索结果了吗？
是的
没有找到

接上一篇事件详解

，当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数。...，与mousewheel事件一样，但是他的有关鼠标滚轮信息保存在detail属性中，当鼠标向前滚动时，这个属性值是-3的倍数，当鼠标滚轮向后滚动时，这个属性值是3的倍数；也可以给DOMMouseScroll...{ return -event.detail * 40 } } getWheelDelta方法首先检测了事件对象是否包含了wheelDelta属性，如果包含则返回属性值，如果不包含...有以下几个触摸事件： touchstart: 当手指触摸屏幕时触发，即使是一个手指放在屏幕上也会触发。...touchmove:当手指在屏幕上滑动时连续地触发，这个事件发生期间，我们可以使用preventDefault()事件可以阻止滚动。 touchend: 当手指从屏幕上移开时触发。

1.8K60

Belinda的小程序踩坑记（一）

利用空闲时间，我把蜂贷微信项目部分迁移到小程序上。...html 中的 div ，但是不同的是，用 view 包裹的内容，在超出设备窗口的时候，它实现的效果如 css 样式设置的 overflow：hidden 2、如果你需要实现类似通讯录或则聊天列表的滚动效果...，你需要使用 scroll-view 滚动容器组件，它实现的效果如 css 样式设置的 overflow:scroll 。...除MANA 同样也定义了常用的事件分类，如 1、touchstart 手指触摸动作开始 2、touchmove 手指触摸后移动 3、touchcancel 手指触摸动作被打断，如来电提醒，弹窗 4、touchend...手指触摸动作结束 5、tap 手指触摸后马上离开 6、longtap 手指触摸后，超过350ms再离开 组件样式 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

1.2K70

HTML5移动端开发的常用触摸事件

触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。...下面具体说明： 　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。...在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 　　touchend事件：当手指从屏幕上离开的时候触发。 　　touchcancel事件：当系统停止跟踪触摸的时候触发。...每个触摸点由包含了如下触摸信息（常用）： identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。...pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

1.6K10

前端成神之路-WebAPIs07

1.1.2 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲： （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置...（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault...可以自动播放图片 手指可以拖动播放轮播图 1.2.2....自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片

3.5K10

移动端app开发问题及理解

ondbclick 鼠标双击事件 onmousedown 鼠标按下 onmouseup 鼠标按键抬起 onmouseover 鼠标进入某个元素 onmousemove 鼠标移动到元素 onmouseout...ondragover 元素在有效拖放目标上正在被拖动时运行的脚本 ondragstart 在拖动操作开端运行的脚本 ondrop 当被拖元素正在被拖放是运行的脚本 onmousewheel 当鼠标滚轮整被滚动时...onscroll 元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click，移动端中，连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart...手指触摸到屏幕触发 touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕时，突然alert了，或者系统中其他打断了...js如何与app端交互 具体可看下这个 https://zhuanlan.zhihu.com/p/337890794 我的理解 首先了解下 app移动端网页运行在手机应用内嵌的浏览器引擎中，没有UI

3.8K10

JS中的touch事件与canvas绘图

Touch事件分类 touchstart：当手指触摸屏幕时触发。...不管有多少个手指放在了屏幕上，只要再触摸一下屏幕就会触发 touchmove：当手指在屏幕上滑动的时候触发该是事件，在这期间可以通过event.preventDefault()来阻止滚动 touchend...用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。...当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。 changedTouches此时只有一个值，为第二个手指的触摸点。...当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. Touch.pageY 触点相对于HTML文档上边沿的的Y坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移.

7.3K41

「JavaScript 」动画基础 - 03

比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置 拖动元素三步曲： 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置...注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault(); 1.2. 移动端常见特效 1.2.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。...可以自动播放图片 手指可以拖动播放轮播图 1.2.2. 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 // 1.

1.1K20

移动端轮播图笔记

1.触屏事件 1.1触屏事件概述 移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android...touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根笔。...手指从一个DOM元素上移开时触发 1.2触摸事件对象（TochEvent） TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...（2）移动手指touchmove：计算手指的滑动距离，并且移动盒子 （3）离开手指touchend 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault...2.开启定时器 3.移动端移动，可以使用translate移动 4.想要图片缓动效果，添加过渡transition效果 实现播放功能后，接着实现无缝滚动 自动播放功能无缝滚动 注意：我们判断条件是要等到图片滚动完毕再去判断

2.5K21

cocos creator鼠标键盘事件总结

'mouseup' 当鼠标从按下状态松开时触发一次 cc.Node.EventType.MOUSE_WHEEL 'mousewheel' 当鼠标滚轮滚动时 鼠标事件（cc.Event.EventMouse...）的重要 API 如下（cc.Event 标准事件 API 之外）： 函数名 返回值类型 意义 getScrollY Number 获取滚轮滚动的 Y 轴距离，只有滚动时才有效 getLocation...鼠标和触摸事件冒泡 鼠标和触摸事件均支持节点树的事件冒泡 A节点拥有一个子节点B，B拥有一个子节点C。假设开发者对A、B、C都监听了触摸事件。...当鼠标或手指在C节点区域内按下时，事件将首先在C节点触发并通知C节点上注册的事件监听器。...目前支持了以下几种事件： 键盘事件 鼠标事件 触摸事件 设备重力传感事件 注意：目前已经不建议直接使用 cc.eventManager 来注册任何事件，cc.eventManager 的用法也不保证持续性

2.2K51

移动端页面如何优雅的适配各种屏幕，包括PC端

eventTarget.dispatchEvent) 鼠标按下显然对应的是touchstart，触发的第一个touch事件，事件目标肯定也是新的，所以需要更新，理论上不同手指的事件目标是可能不一样的，但是由于桌面端鼠标事件只能有一个...：当前屏幕上所有触摸点的列表 targetTouches：当前对象上所有触摸点的列表 changedTouches：涉及当前(引发)事件的触摸点的列表 移动端触摸点是可能存在多个的，比如我同时好几个手指一起触摸...，可以通过这三个列表进行区分，同样举个栗子，比如我给一个div绑定了三个touch事件，第一次我一个手指触摸到div上，此时这三个列表的值是一样的，就是第一个手指的触摸点，然后我第二个手指也开始触摸，但是不是触摸到...div上，而是其他元素上，那么此时touches列表会包含两个手指的触摸点，targetTouches列表只会包含第一个手指的触摸点，changedTouches列表则为第二个手指的触摸点。...手指全部松开后，这三个列表都将为空。 但是在桌面端，鼠标触摸点显然只有一个，所以这三个列表其实都是相同的。

1.9K20

手势魅力-设置一个触摸菜单

(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...我知道，令人震惊的是，尤其是当你不是第一次码代码的人,或者你只是在那里维护它的时候 有时候，这可能是一个吃力不讨好的工作。...那种让你用一只手盯着屏幕，另一只手放在你的额头上，另一只手放在鼠标上滚动的时间 有 - 我敢说呢？ - 如丝般流畅的手势触摸手势和动画可能是一个挑战，并随着时间的推移变得越来越突出。...触摸属性列出当前在屏幕上的所有手指: PageX:返回手指放置在DOM中的x坐标。从左边开始计算,如果适用,则考虑水平滚动 PageY:返回手指放置在DOM中的y坐标。...这绝对不是你想要用你的手机触摸手势发生的事情，所以考虑一下：当你打开/关闭菜单时，你是否有兴趣阅读滚动隐藏的内容？如果你的拖拽方向是水平的，你就不能滚动 ? 我们需要一些边界在这里！

1.8K40

原生 JS 手写一个优雅的图片预览功能，带你吃透背后原理

移动查看由于缩放导致图像发生变化，我们自然地想到要靠移动来观察图片，此时体现在PC端的是按住鼠标拖拽，移动端则是手指点击滑动，而两者各自的事件监听显然并不共通，如以移动事件为例，PC端对应的是 mousemove...那么有没有一种事件可以做到同时监听鼠标操作和手指操作呢？答案是有的！...指针 是输入设备的硬件层抽象（比如鼠标，触摸笔，或触摸屏上的一个触摸点），它能指向一个具体表面（如屏幕）上的一个（或一组）坐标，可以表示包括接触点的位置，引发事件的设备类型，接触表面受到的压力等。...，与点击做区别// 鼠标/手指按下window.addEventListener('pointerdown', function (e) { e.preventDefault() isTouching...= true startPoint = { x: e.clientX, y: e.clientY }})// 鼠标/手指抬起window.addEventListener('pointerup',

2.5K81

移动端触屏事件

触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离：  手指滑动中的位置 减去  手指刚开始触摸的位置 拖动元素三步曲： （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置...（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault

2.9K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券