Chrome - Javascript 阻止默认的 Ctrl + MouseWheel 行为答案

【问题标题】：Chrome - Javascript prevent default Ctrl + MouseWheel behaviorChrome - Javascript 阻止默认的 Ctrl + MouseWheel 行为
【发布时间】：2013-07-25 17:07:58
【问题描述】：

我试图阻止默认的 Ctrl+MouseWheel 在 Chrome 中使用 JavaScript 缩放行为，对于其他浏览器我使用 preventDefault() 和 stopPropagation() 在鼠标滚轮事件的回调函数，效果很好，因为其他浏览器总是触发鼠标滚轮事件，但 Chrome 不会。

阅读问题How to catch Zoom event with GWT and Chrome 我发现 Ctrl + MouseWheel 可以作为调整大小事件被捕获，但在缩放页面后，我无法阻止此行为。

在 Ctrl+MouseWheel 之前是否在 Chrome 中创建了其他事件或者是一个错误？

【问题讨论】：

标签： google-chrome default dom-events mousewheel ctrl

【解决方案1】：

试图阻止窗口/文档/正文的缩放并没有真正起作用，但是用 div 包裹正文的内容并阻止缩放它可以正常工作。

document.getElementById('root').addEventListener('wheel', event => {
  if (event.ctrlKey) {
    event.preventDefault()
  }
}, true)

#root {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: silver;
}

&lt;div id="root"&gt;no zoom allowed&lt;/div&gt;

【讨论】：

点赞！为我工作，Chrome 73.0.3683.86，Linux。

【解决方案2】：

'wheel' 事件和 preventDefault 正在运行。 MDN.

【讨论】：

【解决方案3】：

从 Chrome 76 开始，window 上的 wheel 事件可以取消，但只有在您注册被动事件侦听器时才能取消。从其他答案和示例来看，如果事件位于诸如根 <div> 之类的 DOM 元素上，您似乎也可以取消该事件。

window.addEventListener('wheel', function(event) {
  event.preventDefault();
}, { passive: false });

body {
  font-family: sans-serif;
  font-size: 24px;
  background: #AAA;
}

<p>
  Inside of this page, you cannot zoom with the mouse wheel.
</p>

【讨论】：

我对这个答案感到困惑。它可以工作only if you register a passive event listener - 但是您的示例使用passive: false 显式注册一个事件，并且文档说拥有被动事件侦听器会禁用preventDefault()。

【解决方案4】：

很遗憾，在 Chrome 中无法拦截或阻止 CTRL + 滚轮（缩放）事件。

正在https://code.google.com/p/chromium/issues/detail?id=111059 跟踪此问题。为问题加注星标以获取（进度）更新通知。

【讨论】：

【解决方案5】：

作为@Vl4dimyr 答案的改进

document.getElementById('root').addEventListener('wheel', event => {
  if (event.ctrlKey) {
    event.preventDefault()
  }
}, true)

#root {
  position: absolute;
  top: 0;
  right: 0;
  /*-------------------important part----------------------*/
  /*bottom: 0;*/
  min-height:100vh; /*extendible cover for document*/
  /*-------------------------------------------------------*/
  left: 0;
  background: silver;
}

<div id="root">no zoom allowed</div>

【讨论】：

【解决方案6】：

在 chromium bug tracker 论坛上找到了这个fiddle，现在看来问题已经解决了。 Chromium 现在先将 ctrl+wheel 事件发送到 webkit，然后再使用它们进行缩放。而不是阻止在EventHandler::handleWheel
event.preventDefault() 中滚动这些事件应该可以解决问题。

【讨论】：