阻止默认事件，滚轮事件与滚动事件

Posted 2023-04-22

参考技术A 一、阻止默认事件：
1.默认事件：浏览器页面有很多行为：左击，右击，双击，滚轮事件。这些都是浏览器的默认自带的事件
2.阻止默认事件：要来对这个事件进行破坏
e.preventDefault(); 阻止默认事件
e.returnValue = false; 兼容低版本IE
return false; 可以阻止默认事件（注意：只能阻止DOM零级而不能阻止DOM二级）

二、滚轮事件与滚动事件
1.滚动事件：window.onscroll：监听到的是浏览器的滚动条

2.滚轮事件：document.onmousewheel：（火狐浏览器的兼容要在DOM二级中写，DOM零级无法实现！）

三、滚轮方向
主流浏览器滚动值：
1.值都为120的倍数
2.向下滚：值为负数
向上滚：值为正数
火狐浏览器滚动值：
1.值都为3的倍数
2.向下滚：值为正数
向上滚：值为负数

如何在Vue js中将鼠标滚轮事件标记为被动？

【中文标题】如何在Vue js中将鼠标滚轮事件标记为被动？

【英文标题】：How do I mark a mousewheel event as passive in Vue js?

【发布时间】：2018-06-18 00:09:11

【问题描述】：

Chrome 警告我：“向阻止滚动的 'mousewheel' 事件添加了非被动事件侦听器”。

我希望该警告消失。我使用的是 Vue js 2.5.13，根据documentation，您可以使用<div v-on:scroll.passive="onScroll">...</div> 使事件被动。但是，我无法弄清楚鼠标滚轮事件。

这是我的代码：

<select v-model='selectWatcher'>
    <option v-for="option in myOptions" v-bind:value="option.id">option.name</option>
</select>

如果有帮助，selectWatcher 是我的 vue 实例的 watch 部分中的一个函数。

我试过了：

<select v-model='selectWatcher' v-on:mousewheel.passive>

<select v-model='selectWatcher' v-on:mousewheel.passive="true">

<select v-model='selectWatcher' v-on:scroll.passive="mousewheel">

这些都不起作用，我仍然收到警告。我究竟做错了什么？我是否需要以某种方式将selectWatcher 标记为被动？

【问题讨论】：

.passive 事件修饰符是 new in 2.3.0+

是的，我使用的是 vue 2.5

您包含的代码没有v-on:mousewheel，因此不清楚错误是在哪里产生的。 FWIW，只有您尝试的最后一个 v-ons 结构正确。

我没有在代码中的任何地方专门使用鼠标滚轮事件，但这是 Chrome 警告的事件。每次我单击带有v-model

的选择框时都会发生这种情况

听起来这是一个与 select 关联的 Vue 内部事件，在这种情况下，我认为您无能为力。我相信selectWatcher 也是数据项或道具？

【参考方案1】：

由于您没有创建 mousewheel 事件，因此您将无法修改它所抱怨的事件。没有办法说“使所有鼠标滚轮事件被动”。

【讨论】：

我之前的评论并不清楚。我上面例子中的selectWatcher 是数据。它有一个匹配的监视函数，当selectWatcher 数据数组发生变化时运行