Событие Mousewheel & dommousescroll в IE & Edge

У меня есть этот код:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script>
    window.addEventListener('DOMMouseScroll', mouseWheelEvent);
    window.addEventListener('mousewheel', mouseWheelEvent);

    function mouseWheelEvent() {
        alert(1);
    }
</script>
</body>
</html>

Он работает в Chrome и Firefox. Тем не менее, он не работает с моей сенсорной панелью Dell dell xps 13 9434 в IE и краю. Но он работает с (некоторыми) сенсорными планшетами других ноутбуков. Что делать? jQuery не проблема.

"что не работает?" = > В прокрутке отсутствует предупреждение при использовании 2 пальцев, как вы используете для прокрутки в браузерах.

Ответы

Ответ 1

Edit

После некоторых исследований кажется, что проблема на самом деле - это Microsoft.

Об этом в EdgeHTML вопросете о проблемах < уже существует уже около года.

В основном это говорит о том, что события колеса не работают в Edge (и более старые версии IE) при использовании Precision Touchpads.

Кстати, я не удаляю остальную часть ответа, поскольку он все еще имеет значение. Вы все равно должны использовать wheel.

Вы должны слушать wheel:

window.addEventListener('wheel', mouseWheelEvent);

Он заменил как mousewheel, так и DOMMouseScroll, которые устарели и теперь поддерживаемый всеми браузерами.

Пример кросс-браузера:

window.addEventListener('wheel', mouseWheelEvent);   

function mouseWheelEvent() {
    console.log("Fired");
}
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>
<h1>
  Hodor!
</h1>

Ответ 2

Некоторые старые версии IE не поддерживают addEventListener, они поддерживают attachEvent.

Попробуйте использовать crossBrowser addEventListener:

if ( window.attachEvent ) {
 window.attachEvent('on'+eventType, yourHandler); // in your case "scroll"
} else {
 window.addEventListener ...
}

Обратите внимание на высоту страницы: она не будет работать, если нет смещения. Если на вашей странице нет смещения, используйте следующее:

document.attachEvent('onmousewheel', mouseWheelEvent); // the event is attached to document