我想听鼠标滚轮，如果鼠标位于某个元素上方，请取消默认值并改为执行我的操作。
现在我只想记录事件并阻止它：
const handleWheel = e => {
console.log(e);
e.preventDefault();
};
使用 svelte 这是我想出的：
<svelte:window on:wheel={handleWheel} />
不幸的是，这只能让我记录事件，并给出以下错误消息：
无法在被动事件侦听器调用中阻止默认值。
使用纯JS解决方法是加个参数：
window.addEventListener("wheel", handleWheel, { passive: false});
但是我在提到如何做到这一点的苗条文档中找不到任何方法。那么你将如何以苗条的方式做到这一点？
【问题讨论】：
标签： javascript svelte svelte-3
嗯，你的代码对我来说确实有效......
<script>
const handleWheel = e => {
console.log(e);
e.preventDefault();
};
</script>
<svelte:window on:wheel={handleWheel} />
也许是你的浏览器，但我想它也可能是 REPL 本身（如果你使用的是这个），它可能对<svelte:window /> 事件有一些问题，并显示过时的日志......
实际上，您的解决方案会与您想要的相反，并导致警告：
window.addEventListener("wheel", handleWheel, { passive: true });
来自MDN：
被动
一个布尔值，如果为真，则表明侦听器指定的函数永远不会调用 preventDefault()。如果被动侦听器确实调用了 preventDefault()，则用户代理只会生成控制台警告。
除此之外，Svelte 向事件侦听器添加选项的方法是使用 修饰符。
例如：
<svelte:window on:wheel|preventDefault={handleWheel} />
<svelte:window on:wheel|passive={handleWheel} />
它们可以组合，但preventDefault 和passive 不能很好地组合在一起，所以让我们使用另一个：
<svelte:window on:wheel|preventDefault|once={handleWheel} />
请参阅 Svelte 的 docs on events 了解可用的修饰符和详细信息：
以下修饰符可用：
preventDefault — 在运行处理程序之前调用 event.preventDefault()
stopPropagation — 调用 event.stopPropagation()，防止事件到达下一个元素
被动 - 提高触摸/滚轮事件的滚动性能（Svelte 会在安全的地方自动添加它）
capture — 在捕获阶段而不是冒泡阶段触发处理程序
once — 在第一次运行后删除处理程序
修饰符可以链接在一起，例如
on:click|once|capture={...}.
【讨论】：
<svelte:window on:wheel|preventDefault={handleWheel} /> 在 Chrome / 桌面上对我来说正在按预期工作（防止滚动）......它不适合你吗？你的浏览器是什么？
<div on:wheel|preventDefault={handleWheel}>REPL。 REPL 中的结果并不完美。浏览器对滚动事件很敏感，因为它会破坏性能。我会尝试在mouseenter / mouseleave 中切换一个标志，并在标志打开时防止在窗口上的wheel 中滚动。
目前，没有办法使用事件处理程序惯用地执行此操作，因为 Chrome broke the web 默认情况下使某些事件侦听器处于被动状态。有一个open Svelte issue 可以解决这个问题。
与此同时，最惯用的方式可能是使用动作：
<script>
let scrollable = true;
const wheel = (node, options) => {
let { scrollable } = options;
const handler = e => {
if (!scrollable) e.preventDefault();
};
node.addEventListener('wheel', handler, { passive: false });
return {
update(options) {
scrollable = options.scrollable;
},
destroy() {
node.removeEventListener('wheel', handler, { passive: false });
}
};
};
</script>
<svelte:window use:wheel={{scrollable}} />
【讨论】：