Chrome - Javascript предотвращает поведение Ctrl + MouseWheel по умолчанию

Я пытаюсь предотвратить поведение масштабирования Ctrl + MouseWheel по умолчанию в Chrome с помощью JavaScript, для других браузеров я использую preventDefault() и stopPropagation() в функции обратного вызова для события колесика мыши и работает идеально, потому что другой браузер всегда запускает событие колеса мыши, а Chrome - нет.

Чтение вопроса Как поймать событие Zoom с помощью GWT и Chrome Я обнаружил, что Ctrl + MouseWheel может быть обнаружен как событие изменения размера, но после масштабирования страницы, поэтому я не могу предотвратить поведение с этим.

Есть ли другое событие, созданное до Ctrl + MouseWheel в Chrome, или это ошибка?


google-chrome mousewheel default dom-events ctrl
person Arless    schedule 25.07.2013    source источник

Ответы (6)


arrow_upward
1
arrow_downward

К сожалению, в Chrome невозможно перехватить или заблокировать событие CTRL + scrollwheel (zoom).

Эта проблема отслеживается на https://code.google.com/p/chromium/issues/detail?id=111059. Пометьте проблему, чтобы получать уведомления об обновлениях (прогресс).

person Rob W    schedule 25.07.2013

arrow_upward
5
arrow_downward

Попытка предотвратить масштабирование окна / документа / тела на самом деле не работает, но обертывание содержимого тела с помощью 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>

person Vl4dimyr    schedule 11.06.2019
comment
Пальцы вверх! У меня работает, Chrome 73.0.3683.86, Linux. - person Carabus Manuel; 14.10.2019

arrow_upward
3
arrow_downward

Событие wheel и preventDefault теперь работают. MDN.

person Dmitrii Stebliuk    schedule 08.07.2016

arrow_upward
3
arrow_downward

Начиная с Chrome 76, событие wheel на window можно отменить, но только если вы зарегистрируете пассивный прослушиватель событий. Из других ответов и примеров кажется, что вы также можете отменить событие, если оно находится в элементе DOM, таком как корень <div>.

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>

person ImDaveead    schedule 20.08.2019
comment
Меня смущает этот ответ. Он работает only if you register a passive event listener, но в вашем примере событие явно регистрируется с помощью passive: false, а в документации говорится, что наличие пассивного прослушивателя событий отключает preventDefault(). - person Joshua Wade; 09.09.2020

arrow_upward
0
arrow_downward

как улучшение ответа @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>
person mustafa kemal tuna    schedule 17.04.2020

arrow_upward
0
arrow_downward

Нашел эту скрипку на форуме отслеживания ошибок хрома, похоже, теперь проблема исправлена. Chromium теперь сначала отправляет события ctrl + wheel в webkit, прежде чем использовать их для масштабирования. Вместо того, чтобы предотвращать прокрутку этих событий в EventHandler::handleWheel
event.preventDefault(), это должно помочь.

person A5H1Q    schedule 24.05.2021