JS:鼠标空闲时自动滚动，手指不触摸？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端成神之路-WebAPIs06

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

1.3K4 0

jimojianghu

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

3.8K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

接上一篇事件详解

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

1.9K6 0

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.3K7 0

10-移动端开发教程-移动端事件

2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...()来阻止鼠标事件被触发。...不会包括左边的滚动距离。 5. clientY 触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。...6. pageX 触摸点相对于 document的左边缘的 x 坐标。与 clientX 不同的是，他包括左边滚动的距离，如果有的话。...7. pageY 触摸点相对于 document的左边缘的 y 坐标。与 clientY 不同的是，他包括上边滚动的距离，如果有的话。

6.4K7 0

10-移动端开发教程-移动端事件

2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...()来阻止鼠标事件被触发。...不会包括左边的滚动距离。 5. clientY 触摸点相对于浏览器的 viewport上边缘的 y 坐标。不会包括上边的滚动距离。...6. pageX 触摸点相对于 document的左边缘的 x 坐标。与 clientX 不同的是，他包括左边滚动的距离，如果有的话。...7. pageY 触摸点相对于 document的左边缘的 y 坐标。与 clientY 不同的是，他包括上边滚动的距离，如果有的话。

6.8K8 0

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

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

1.6K1 0

JS中的touch事件与canvas绘图

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

7.4K4 1

移动端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.8K1 0

前端成神之路-WebAPIs07

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

3.6K1 0

「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.2K2 0

JavaScript 编程精解中文第三版十五、处理事件

触摸屏与鼠标的工作方式不同：它没有多个按钮，当手指不在屏幕上时不能跟踪手指（来模拟"mousemove"），并且允许多个手指同时在屏幕上。...当手指开始触摸屏幕时，您会看到'touchstart'事件。当它在触摸中移动时，触发"touchmove"事件。最后，当它停止触摸屏幕时，您会看到"touchend"事件。...由于许多触摸屏可以同时检测多个手指，这些事件没有与其关联的一组坐标。...你可以这样，在每个触摸手指周围显示红色圆圈。...确保按键只更改气球，而不滚动页面。实现了之后，添加一个功能，如果你将气球吹过一定的尺寸，它就会爆炸。

5.5K2 0

移动端轮播图笔记

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.5K2 1

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...用于跟踪多点触摸事件。相同的手指=相同的标识符。...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标 screenX / screenY 屏幕坐标中鼠标指针的x和y坐标 pageX / pageY 页面坐标(包括滚动...)中鼠标指针的x和y坐标目标被触及的元素

8.8K2 0

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.2K5 1

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

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

2K2 0

DOM事件基本概念大总结(前端必备)

，当鼠标移入将其停止，移出又自动播放 var doc = document.querySelector('input'); doc.addEventListener('mouseenter', function...，在任何元素上通过鼠标滚动即可触发。...可以检测页面滚动是否来自鼠标。该事件冒泡。...若该事件改变了内容将不会在发生其他事件，否则可以发生 down、up、click 事件 mousemove 也会触发 mouseenter 和 mouseout 手指滚动页面时会触发 mousewheel...该事件可能被替代 deviceorientation devicemotion 触摸与手势事件这一类事件是移动设备的事件核心触摸事件 touchstart 手指触摸屏幕触发 touchmove

1.8K2 0

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

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

1.8K4 0

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

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

2.9K8 1

移动端触屏事件

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

2.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭