web-dev-qa-db-ja.com

IE＆EdgeでのMousewheel＆dommousescrollイベント

私はこのコードを持っています：

<!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で動作します。ただし、IE＆EdgeのラップトップDell xps 13 9434のタッチパッドでは動作しません。ただし、 （一部）他のラップトップのタッチパッド。どうすればよいですか？jQueryは問題ありません。

「何がうまくいかないの？」 =>ブラウザでスクロールする場合のように2本の指を使用する場合、スクロールにアラートはありません。

javascriptinternet-explorermouseeventmulti-touchmicrosoft-edge
16
Mart

編集

いくつかの調査の後、問題は実際にはマイクロソフトのものであるようです。

EdgeHTML Issue Tracker には、すでにほぼ1年間未解決の問題があります。

基本的に、ホイールイベントはEdgeでは機能しない（そして古いIEバージョン） 高精度タッチパッド 。

ちなみに、それはまだ関連しているので、私は答えの残りを削除しません。とにかく代わりに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>

そして JSFiddleデモ

15
Jaqen H'ghar

EdgeHTML 17を見つめて、Microsoftはこの問題を解決するためにポインタイベントをサポートしています。

https://blogs.windows.com/msedgedev/2017/12/07/better-precision-touchpad-experience-ptp-pointer-events/

現在、ポインタイベントはSafariを除くすべての主要なブラウザでサポートされています。

https://caniuse.com/#search=pointer

1
Hamed

一部の古いIEバージョンはaddEventListenerをサポートしていませんが、代わりにattachEventをサポートしています。

CrossBrowseraddEventListenerを試してください。

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
0
misterwolf