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

我想听听鼠标滚轮的声音，如果鼠标位于某个元素上方，请取消默认设置，改为执行我的操作

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

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

使用苗条这就是我想到的：

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

---

但是，我无法在纤细的文档中找到方法来提到如何做到这一点。那么，你会如何以苗条的方式来做这件事呢

好吧，你的代码对我来说确实有效

常数handleWheel=e=>{ console.loge； e、 防止违约； }; 看

可能是你的浏览器，但我猜也可能是REPL本身，如果你使用的是REPL，那么它可能与事件有关，并且显示过时的日志

实际上，您的解决方案与您想要的正好相反，并导致警告：

window.addEventListenerwheel，handleWheel，{passive:true}； 发件人：

被动的

一个布尔值，如果为true，则表示侦听器指定的函数永远不会调用preventDefault。如果被动侦听器调用preventDefault，则用户代理只会生成控制台警告

这样一来，Svelte向事件侦听器添加选项的方法就是使用修饰符

例如：

它们是可组合的，但默认和被动不能很好地结合在一起，所以让我们使用另一个：

有关可用的修改器和详细信息，请参见苗条：

以下修改器可用：

preventDefault-在运行处理程序之前调用event.preventDefault

StopRopAgation-调用event.StopRopAgation，防止事件到达下一个元素

被动-提高触摸/滚轮事件的滚动性能Svelte将在安全的情况下自动添加

捕获-在捕获阶段而不是冒泡阶段触发处理程序

一次-在处理程序第一次运行后将其删除

修改器可以链接在一起，例如：单击|一次|捕获={…}

---

好吧，你的代码和我的一样有效

常数handleWheel=e=>{ console.loge； e、 防止违约； }; 看

可能是你的浏览器，但我猜也可能是REPL本身，如果你使用的是REPL，那么它可能与事件有关，并且显示过时的日志

实际上，您的解决方案与您想要的正好相反，并导致警告：

window.addEventListenerwheel，handleWheel，{passive:true}； 发件人：

被动的

一个布尔值，如果为true，则表示侦听器指定的函数永远不会调用preventDefault。如果被动侦听器调用preventDefault，则用户代理只会生成控制台警告

这样一来，Svelte向事件侦听器添加选项的方法就是使用修饰符

例如：

它们是可组合的，但默认和被动不能很好地结合在一起，所以让我们使用另一个：

有关可用的修改器和详细信息，请参见苗条：

以下修改器可用：

preventDefault-在运行处理程序之前调用event.preventDefault

StopRopAgation-调用event.StopRopAgation，防止事件到达下一个元素

被动-提高触摸/滚轮事件的滚动性能Svelte将在安全的情况下自动添加

捕获-在捕获阶段而不是冒泡阶段触发处理程序

一次-在处理程序第一次运行后将其删除

修改器可以链接在一起，例如：单击|一次|捕获={…}

---

目前，没有办法用事件处理程序来实现这一点，因为Chrome默认情况下会使某些事件侦听器处于被动状态。有一种方法可以解决这个问题

同时，最惯用的方式可能是使用动作：

让scrollable=true； const wheel=节点，选项=>{ 设{scrollable}=选项； 常量处理程序=e=>{ if！可滚动的e.prevent默认值； }; addEventListener'wheel'，handler，{passive:false}； 返回{ 更新选项{ 可滚动=选项。可滚动； }, 毁灭{ removeEventListener'wheel'，handler，{passive:false}； } }; };

---

目前，没有办法用事件处理程序来实现这一点，因为Chrome默认情况下会使某些事件侦听器处于被动状态。有一种方法可以解决这个问题

同时，最惯用的方式可能是使用动作：

让scrollable=true； const wheel=节点，选项=>{ 设{scrollable}=选项； 常量处理程序=e=>{ if！可滚动的e.prevent默认值； }; addEventListener'wheel'，handler，{passive:false}； 返回{ 更新选项{ 纸卷 able=options.scrollable； }, 毁灭{ removeEventListener'wheel'，handler，{passive:false}； } }; };

---

似乎|被动修饰符将被动设置为true，而不是false。但我能够用onMount函数解决这个问题，这里的se示例与chrome一起工作，顺便说一句，你是对的，我的代码示例在应该为false的地方为true。我已经解决了这个问题，你的答案是完全正确的。Svelte并没有将你与普通JS完全隔离的职业，恰恰相反。如果你觉得这是最适合你的，你应该把它作为一个答案贴出来并接受它。这就是说，在Chrome/桌面上，我的防滚动功能正如期发挥作用。。。这对你不管用吗？什么是您的浏览器？| PreventDefault阻止我滚动，但我只想在鼠标悬停在给定元素上时阻止滚动，这似乎更有意义。您可以将此添加到页面上的任何元素：。REPL中的结果并不完美。浏览器对滚动事件很敏感，因为它会破坏性能。我会尝试在mouseenter/mouseleave中切换一个标志，并在wheel-on窗口中防止滚动，此时on.中的标志似乎是|被动修饰符将被动设置为true，而不是false。但我能够用onMount函数解决这个问题，这里的se示例与chrome一起工作，顺便说一句，你是对的，我的代码示例在应该为false的地方为true。我已经解决了这个问题，你的答案是完全正确的。Svelte并没有将你与普通JS完全隔离的职业，恰恰相反。如果你觉得这是最适合你的，你应该把它作为一个答案贴出来并接受它。这就是说，在Chrome/桌面上，我的防滚动功能正如期发挥作用。。。这对你不管用吗？什么是您的浏览器？| PreventDefault阻止我滚动，但我只想在鼠标悬停在给定元素上时阻止滚动，这似乎更有意义。您可以将此添加到页面上的任何元素：。REPL中的结果并不完美。浏览器对滚动事件很敏感，因为它会破坏性能。我会尝试在mouseenter/mouseleave中切换一个标志，并防止在wheel-on窗口中滚动，当该标志处于打开状态时。这是指向破坏mousewheel事件的最新更新的链接，这是指向破坏mousewheel事件的最新更新的链接

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