javascript - 如何在 svelte 中向窗口事件/鼠标滚轮添加参数

Question

我想听一下鼠标滚轮的声音，如果鼠标位于某个元素上方，则取消默认值并执行我的操作。

现在我只想记录该事件并阻止它:

  const handleWheel = e => {
    console.log(e);
    e.preventDefault();
  };

使用 svelte 这是我想出的:

<svelte:window on:wheel={handleWheel} />

不幸的是，这只能让我记录事件，并给出以下错误消息:

Unable to preventDefault inside passive event listener invocation.

使用纯JS解决方案是添加一个参数:

window.addEventListener("wheel", handleWheel, { passive: false});

但是我在简洁的文档中找不到提到如何做到这一点的方法。那么你会如何以简洁的方式做到这一点呢？

Answer 1

嗯，你的代码确实适合我......

<script>
  const handleWheel = e => {
    console.log(e);
    e.preventDefault();
  };
</script>

<svelte:window on:wheel={handleWheel} />

参见in the REPL .

也许是你的浏览器的问题，但我想也可能是 REPL 本身的问题(如果你使用的是浏览器的话)，<svelte:window /> 可能存在一些问题。事件，并显示过时的日志...

实际上，您的解决方案会做与您想要的相反的事情，并导致警告:

window.addEventListener("wheel", handleWheel, { passive: true });

来自MDN :

passive

A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.

解决了这个问题，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有关可用修饰符和详细信息:

The following modifiers are available:

preventDefault — calls event.preventDefault() before running the handler

stopPropagation — calls event.stopPropagation(), preventing the event reaching the next element

passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)

capture — fires the handler during the capture phase instead of the bubbling phase

once — remove the handler after the first time it runs

Modifiers can be chained together, e.g. on:click|once|capture={...}.