Chrome - 阻止Javascript默认的Ctrl + 鼠标滚轮行为

Question

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

阅读问题如何捕获GWT和Chrome中的缩放事件，我发现可以将Ctrl+MouseWheel捕获为调整大小事件，但在缩放页面后就无法用此方法防止行为。

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

- Arless

Answer 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;
}

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

- Vl4dimyr

---

赞！对我有效，Chrome 73.0.3683.86，Linux。 - Carabus Manuel

在Brave/Chrome中，如果您恰好在回调函数中使用document.writeln()，它会执行某些操作，可能会更改焦点，但第一个此类事件被捕获，其余事件将绕过目标，因此它似乎是有问题的，但实际上并不是。我刚刚花了10分钟弄清楚这个问题。 - Nolo

请注意，在React中，onWheel preventDefault存在问题。使用ref和addEventListener或onwheel处理滚轮事件可以正常工作，但是直接在div上使用onWheel属性无法正常工作。详见https://github.com/facebook/react/pull/19654。 - geon

Answer 2

从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>

- ImDaveead

---

我对这个答案感到困惑。它只在你注册一个被动事件监听器时才起作用，但是你的例子使用了passive: false显式地注册了一个事件，并且文档说，拥有一个被动事件监听器会禁用preventDefault()方法。 - Joshua Wade

Answer 3

'wheel' 事件和 preventDefault 现在可以使用了。 MDN。

- Dmitrii Stebliuk

Answer 4

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

该问题正在https://code.google.com/p/chromium/issues/detail?id=111059上跟踪。收藏该问题以便获取进展更新通知。

- Rob W

Answer 5

我在Chromium漏洞跟踪器论坛上发现了这个fiddle，看起来问题现在已经解决了。 Chromium现在会先将ctrl+鼠标滚轮事件发送到webkit，然后再用它们进行缩放。而不是在EventHandler::handleWheel中阻止这些事件的滚动。
event.preventDefault()应该可以解决问题。

- A5H1Q

Answer 6

针对React JS

在我的项目中，我为组件添加了一个引用（ref），然后为该引用添加了事件监听器，并将

useEffect(() => {
const element = boxRef.current;
if (element) {
  element.addEventListener("wheel", handleWheel, {
    capture: true,
    passive: false,
  });
}

return () => {
  if (element) {
    element.removeEventListener("wheel", handleWheel);
  }
};
}, []);

我的HTML代码如下：

<Box
    ref={boxRef}
    sx={{
      position: "relative",
      height: "100%",
      transform: `scale(${zoomValue / 100})`,
    }}
  ></Box>

我的 handleWheel 函数是：

const handleWheel = (event) => {
if (event.ctrlKey) {
  event.preventDefault();
  //control key is pressed
  if (event.deltaY > 0) {
    //scrolled down
    console.log("Scroll Down");
  } else {
    //scrolled up
    console.log("Scrolled Up");
  }
}
};

这对我来说很好用，我能够添加我的自定义缩放功能。

- Anand A Nair

Answer 7

作为对 @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>

- mustafa kemal tuna