如何确保鼠标滚轮/滚轮事件在可滚动div中的每个滚动中只触发一次 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

前言其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。...实现思路在js中，onmousewheel是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是vue所以使用的是：mousewheel。...,显而易见动动鼠标滚轮就能触发事件,但是用光标拖拽滚动条就不能触发事件。...onmousewheelonmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。...在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动而滚动，这是浏览器的默认行为，可用return false来取消浏览器的默认行为。有火狐鼠标滚轮兼容问题。

5.8K2 0

JS事件篇

时，表明垂直滚动条滚动到底了阅读知情同意书的小案例 onmousemove事件和事件对象获取鼠标的坐标页面滚动条的归属者解决浏览器兼容性常使用以下写法 div跟随鼠标移动事件的冒泡和事件对象event...，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载 window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保...确保是一次性事件 documnet.onmouseup=null; //当鼠标松开时，释放点击事件的捕获 //浏览器兼容性 obj.releaseCapture...div，那么就让鼠标呆在点击出，而不是跑到左上角，计算出div在每次鼠标点击时需要的偏移量即可 ---- 鼠标滚轮事件----onmousewheel----火狐不支持，由DOMMouseScroll...替代 d1.onmousewheel=function() { alert("鼠标滚轮滚动了"); }; //为div绑定一个鼠标滚轮事件

14.5K1 0

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

是的

没有找到

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

本文主要针对浏览器的窗口事件做一些简要介绍，只在让读者可以入门操作bom有关的事件。...> 网页预览效果如图5-22所示：图5-22页面效果在jQuery中的scroll事件是当滚轮出现时，用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件。...在这个代码中，一旦触发scroll事件，就会弹出如图5-23所示的提示。...根据业务需要，有时候在没有滚动条情况下要触发鼠标滚动事件，如在页面中实现图片切换效果，就要回归使用JavaScript的方式将document绑定到mousewheel事件上。...代码如下所示： document.onmousewheel = function() { //鼠标滚轮滚动后发生的代码 };

1.1K1 0

随心所欲的滚动条，远离产品汪（二）

滚轮事件及兼容问题概要在鼠标上，除了点击、拖拽等事件，当然也少不了滚轮事件了，但是比较有意思的一点是，平常大家碰到兼容问题首先想到了IE这个万年背锅侠，但是这次还真不是，火狐别树一帜的凑了一回热闹。...1.在滚轮事件中，火狐的的滚动事件是DOMMouseScroll，而其它浏览器是mousewheel，这一点是要仔细留意的。 2.在事件对象的兼容中。...具体实现步骤滚动事件的添加原理其实与实现自定义滚动条的原理基本一致，只是多了滚轮滚动方向的判断及滚动值的获取。...首先，我们需要明白我们的滚轮是作用在谁的身上，根据实际需求来进行事件绑定，当我们鼠标移入可视区时，会触发滚轮事件，在移出可视区时则清除滚轮事件，接下来进行具体代码操作。...较之上篇的实现代码，本篇中增加了两个变量。 1.通过设置变量Judge来判断滚轮的滚动方向，当Judge为ture时，滚轮向上滚动，当Judge为false时，滚轮向下滚动。

2.5K8 0

【从零开始的Qt开发指南】（十七）Qt 事件详解：按键与鼠标事件的全方位实战指南

：运行效果：注意事项组合按键判断时，修饰键使用==或&运算符（多个修饰键组合用|连接）；若需要忽略按键的自动重复（长按按键时只触发一次），可添加if (event->isAutoRepeat...三、鼠标事件（QMouseEvent）全方位实战鼠标事件是 Qt 中最常用的交互事件之一，用于处理鼠标的按下、释放、双击、移动、滚轮滚动等操作。...) 鼠标滚轮滚动时触发 enterEvent(QEvent *event) 鼠标进入组件区域时触发 leaveEvent(QEvent *event) 鼠标离开组件区域时触发我们同样可以使用官方帮助文档查询...3.5 鼠标滚轮事件实战鼠标滚轮事件（wheelEvent）用于处理滚轮滚动操作，通过QWheelEvent类的delta()方法可以获取滚轮滚动的距离（正数表示向前滚动，负数表示向后滚动...下面实现 “滚轮滚动时返回相对位置” 的功能：编写代码：运行效果运行程序后，在窗口中滚动鼠标滚轮，窗口会根据滚动方向实时显示相对滚动位置。

4231 1

有意思的水平横向溢出滚动

来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器...，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。...那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在水平方向溢出滚动的容器，依然可以用鼠标滚轮进行滚动。旋转大法是的，既然只有垂直方向的溢出，才能响应滚轮操作。那我们不妨从这个角度入手。...，就变成了水平的容器，图中鼠标没有在滚动条上容器的运动就是通过滚轮实现的。...我们实际触发滚动操作的实际是 g-pesudo 的变化，我们只需要将内容通过再一次旋转，完美叠加在原本的容器之上即可： .g-scroll { position: relative; width

3.5K1 0

JavaScript基础

，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个 div class="box1"> div>box1中的divdiv> div> div class="box1">...事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素 target :...向目标元素进行事件的捕获，但是默认此时不会触发事件目标阶段事件捕获到目标元素，捕获结束开始在目标元素上触发事件冒泡阶段事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件如果希望在捕获阶段就触发事件...，可以将addEventListener()的第三个参数设置为true一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false 鼠标单击事件 btn.onclick = function.../* * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， * 但是火狐不支持该属性

2.5K2 0

jquery nicescroll 配置参数

touchbehavior = true时，（默认：true） autohidemode，如何隐藏滚动条的作品，真=默认/“光标”=只进游标隐藏/ false =不隐藏背景，CSS改变轨道的背景下，...默认为“” iframeautoresize，在加载事件AUTORESIZE的iframe（默认：true） cursorminheight，设置在像素的最小光标高度（默认值：20） preservenativescrolling...，您可以滚动本机可滚动区域用鼠标，冒泡鼠标滚轮事件（默认：true） railoffset，您可以添加抵消顶部/左边的轨道位置（默认：false） bouncescroll，使滚动弹跳在内容结尾作为移动像...，nicescroll可以使用CSS转换为滚动内容（默认：true） enablemousewheel，nicescroll可以管理的鼠标滚轮事件（默认：true） enablekeyboard，nicescroll...，可以用鼠标说明锁的API（对象拖动同样的问题）（默认：true） cursorfixedheight，用于光标在像素设置固定的高度（默认：false） hidecursordelay，设置在微秒淡出滚动条的延迟时间

5.3K8 0

面试官：哪些浏览器事件不会冒泡？

回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：document.body.addEventListener('click...在JS中通常利用冒泡来进行事件委托，但并不是所有事件都会冒泡。下面我们看看哪些事件是不能冒泡的，又有哪些相关应用场景。...注意：有个类似滚动事件的叫滚轮事件wheel是可以触发冒泡的（ MDN - wheel_event ），我们甚至可以通过额外注册 wheel 监听事件并阻止其冒泡从而让 scroll 事件失效，不过只要滚动条还在... 假设给 ul 设置了 mouseover 事件，在鼠标经过 ul 时因为 ul 中还有 li 元素，鼠标每经过一个...上还是触发了 ul 的监听事件，其实这并不符合常理，因为此时鼠标还是在 ul 内的。

2.2K2 0

前端学习(53)~键盘事件

鼠标的拖拽事件拖拽的流程：（1）onmousedown：当鼠标在被拖拽元素上按下时，开始拖拽；（2）onmousemove：当鼠标移动时被拖拽元素跟随鼠标移动；（3）onmouseup：当鼠标松开时...鼠标的滚轮事件 onmousewheel：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。 DOMMouseScroll：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。...注意：如果一直按着某一个按键不松手，那么，onkeydown事件会一直触发。此时，松开键盘，onkeyup事件会执行一次。...当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。...id="box1">div> // 使div可以根据不同的方向键向不同的方向移动

1.4K2 0

一、Vue2笔记--基础篇--07-事件处理

2.stop：阻止事件冒泡（常用）； 3.once：事件只触发一次（常用）； 4.capture：使用事件的捕获模式； 5....事件只触发一次(开始点击一次会出提示，后面点击不起作用) --> 点我提示信息事件的捕获模式（事件的发生时先捕获，再冒泡（触发），现在，用了这个模式，让他在捕获阶段就开始触发） --> div class="box1" @click.capture="showMsg...-- （2）@wheel：鼠标上【滚轮的滚动】【事件回调进行完，才进行事件滚动，页面才滚动，所以加passive】 --> 滚轮还在滚动，这个时候，事件还在触发 --> <!

6181 0

学习滚动插件iScroll的简单使用

它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版是又小又快的解决方案（这个能应付大多数场景）。...（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。 iscroll-zoom.js，在标准滚动功能上增加缩放功能。...'); 配置参数说明 var myScroll = new IScroll('#wrapper', { mouseWheel: true, //是否监听鼠标滚轮事件...probeType ： 1 滚动不繁忙的时候触发;probeType ： 2 滚动时每隔一定时间触;probeType ： 3 每滚动一像素触发一次 }); iScroll属性方法功能方法名说明滚动...beforeScrollStart用户点击屏幕，但是还未初始化滚动前scrollCancel初始化滚动后又取消scrollStart开始滚动scroll滚动中scrollEnd滚动结束flick轻击屏幕左

3.6K3 0

接上一篇事件详解

的区别是：它包含页面滚动条的位置，屏幕横坐标screenX和垂直坐标screenY属性是相对于整个屏幕的理解鼠标滚轮事件： IE6首先实现了mousewheel事件，此后opera,chrome和safari...也都实现了这个事件，当用户通过鼠标滚轮与页面交互，在垂直方向上滚动页面时(无论向上还是向下)，就会触发mousewheel事件，这个事件可以在任何元素上触发，最终会冒泡到document（IE8）或window...，当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数。...，也是在鼠标滚轮滚动时触发，与mousewheel事件一样，但是他的有关鼠标滚轮信息保存在detail属性中，当鼠标向前滚动时，这个属性值是-3的倍数，当鼠标滚轮向后滚动时，这个属性值是3的倍数；也可以给...上面几个事件都属于冒泡事件，我们可以对此进行取消事件，每个触摸的event对象都提供了在鼠标中常见的属性； bubbles, cancelable,view,clientX, clientY ，screenX

2.7K6 0

winform笔记

"需要读取的列2（id）"; //comboBox真正的值 comboBox.DataSource = ds.Tables["虚拟列名"];//绑定数据源 2.FlowLayoutPanel支持鼠标滚轮滚动...FlowLayoutPanel控件不直接支持MouseWheel事件.即滚动滚轮也不会响应.所以必须手动来支持响应滚轮....如果只支持MouseWheel事件,还是不一定在滚动滚轮的时候,就能引发MouseWheel事件.所以,必须让鼠标停留在控件上时,让控件处于输入焦点状态.这是,滚动滚轮就可以引发MouseWheel事件了...//在此处设断点，发现点击不同的Item后，此事件居然执行了2次 //第一次是取消当前Item选中状态，导致整个ListView的SelectedIndices...在dialog中定义获取数据的方法 public String getValue(){ return "aaa"; } 然后在调用dialog的主程序中如下调用 Dialog dlg =

2.3K2 0

jQuery 之元素节点操作滚轮事件与函数节流

div id="div1">div> 2、prepend()和prependTo()：在现存元素的内部，从前面插入元素 3、after()和insertAfter()：在现存元素的外部，从后面插入元素...4、before()和insertBefore()：在现存元素的外部，从前面插入元素删除节点 : $('#div1').remove(); todolist(计划列表)实例滚轮事件与函数节流 jquery.mousewheel...插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。...函数节流 javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数...在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

1.7K6 0

关于ScrollViewr和滚动轮劫持(scroll-wheel-hijack)

所谓的滚动轮劫持，简单来说即是在一个可以滚动的页面使用鼠标滚轮滚动页面的过程中鼠标进入某个可以滚动的子元素导致只在这个子元素中滚动而整个页面想滚滚不动了。具体看看这个例子： ?...当然还有另外很多种情况的滚动轮劫持，也有很多解决方案，这篇文章只介绍我遇到的情况和我的解决方案。 2....实现在WPF中要禁止ScrollViewer捕获鼠标滚动时间，可以重写OnMouseWheel成一个空的方法： protected override void OnMouseWheel(MouseWheelEventArgs...e) { } OnMouseWheel方法用于响应鼠标滚轮的事件，将它重载成空方法即不再处理鼠标滚利事件。...熟悉了上面几个属性的作用后我们可以更好地控制鼠标滚轮的行为，当鼠标向上滚动时，判断现在是否已经滚到顶了，如果是就不处理鼠标滚轮事件： if (VerticalOffset == 0 && e.Delta

1.9K3 0

DOM、BOM一些兼容性问题

在之后，W3C 标准化了鼠标滚轮事件 —— wheel ，名字有所改变。标准化后的滚轮事件几乎和原来的事件对象一样。但是兼容性比较差，IE 压根没有这个事件名称。...滚轮事件中有一个属性可以判断鼠标滚轴是向下滚动的还是向上滚动的，这个属性的值是一个数值。...Firefox 支持的 wheel 事件名称获取到的 detail 值好像判断不了滚轮滚动方向（其中有一个 deltaY，属性可做判断，大于零时表示向下滚动，小于零时表示向上滚动），使用 DOMMouseScroll...keypress 与 keydown 很相似，都是表示鼠标按下然后触发的事件。...而使用 keypress ，却可以触发，因为他只触发字符能被输入的键，并返回可以用事件对象中的 keyCode 找到该字符的 ASCII 码，或者直接用事件对象中的 key 获取输入的字符。

2K2 0

C++ Qt开发：Charts折线图绑定事件

以下是这些事件处理函数的简要说明：鼠标按下事件 (mousePressEvent)：当鼠标按下时触发。在该函数中，你可以处理鼠标按下时的逻辑，如获取鼠标坐标、进行拖拽等。...鼠标释放事件 (mouseReleaseEvent)：当鼠标释放时触发。你可以在该函数中处理鼠标释放时的逻辑，如执行点击操作。...鼠标滚轮事件 (wheelEvent)：当鼠标滚轮滚动时触发。你可以在该函数中处理鼠标滚轮事件，如放大缩小、滚动视图等。键盘按下事件 (keyPressEvent)：当键盘按键被按下时触发。...你可以在该函数中处理键盘抬起时的逻辑，如释放某个按键的状态。在附件中笔者将代码整理成了Keyboard and mouse文件，读者可自行打开该文件编译运行观察键盘鼠标事件是如何被重写的。...鼠标滚轮事件 (wheelEvent)：根据滚轮滚动方向，调整 g_x 的值，然后使用 zoom 方法进行缩放。

1.5K1 0

JQ事件和事件对象

键盘按下松开整个过程触发的事件 //keydown（）和keypress区别 keydown（）按下任意键都会触发，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发...()和focusin() 的区别 focusin可以在父元素上检测子元素获得焦点的情况而focusout可以在父元素上检测子元素失去焦点情况四其他事件 1 scroll（）滚动滚动条时触发的事件...1 event .type 描述事件的类型 2 event.target 触发该事件的DOM元素 3 event.currentTarget 在事件冒泡阶段中的当前DOM...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。...以下是主要的鼠标按钮映射代码对应表 Event.which属性值对应的鼠标按钮 1 鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为

5.4K2 0

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

CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置...例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。...虽然浏览器滚动对应的其实是 scroll 事件，但我们在PC上滚动通常都是用利用滚轮(笔记本触控板也被视作滚轮)，所以在滚轮事件中阻止系统默认事件也就阻止了滚动，但不是完全阻止，因为滚动条没隐藏的话还是可以拖动来滚动页面的...注意滚轮事件(wheel)是可以触发冒泡捕获的，而滚动事件(scroll)却无法触发冒泡，了解更多可以看我之前的一篇文章：哪些浏览器事件不会冒泡。至于移动端又是为什么阻止了滚动呢？...在本例的代码中这个CSS本身是没有意义的，为的只是触发css3硬件加速来提升性能，那为什么不直接使用 translate3d() 呢？

4.6K8 1

点击加载更多

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

JS事件篇

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

随心所欲的滚动条，远离产品汪（二）

【从零开始的Qt开发指南】（十七）Qt 事件详解：按键与鼠标事件的全方位实战指南

有意思的水平横向溢出滚动

JavaScript基础

jquery nicescroll 配置参数

面试官：哪些浏览器事件不会冒泡？

前端学习(53)~键盘事件

一、Vue2笔记--基础篇--07-事件处理

学习滚动插件iScroll的简单使用

接上一篇事件详解

winform笔记

jQuery 之元素节点操作滚轮事件与函数节流

关于ScrollViewr和滚动轮劫持(scroll-wheel-hijack)

DOM、BOM一些兼容性问题

C++ Qt开发：Charts折线图绑定事件

JQ事件和事件对象

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐