在現代瀏覽器中的鼠標滾輪事件

我希望爲mousewheel事件提供乾淨漂亮的JavaScript，只支持最新版本的常見瀏覽器，而無需舊版本的遺留代碼，無需任何JS框架。在現代瀏覽器中的鼠標滾輪事件

Mousewheel事件很好地解釋了here。如何爲當前最新版本的瀏覽器簡化它？

我無法訪問所有瀏覽器來測試它，所以caniuse.com對我來說是一個很大的幫助。唉，那裏沒有提到鼠標輪。

根據德里克的評論，我寫了這個解決方案。它適用於所有瀏覽器嗎？

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) { 
    e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40; 
    // custom code 
});

來源

2013-02-17 Jan Turoň

Chrome和IE支持['MouseWheelEvent']（https://developer.mozilla.org/en-US/docs/DOM/MouseWheelEvent），而Firefox支持['WheelEvent']（https：//開頭developer.mozilla.org/en-US/docs/DOM/WheelEvent）。要通過瀏覽器進行收聽，請參見[這裏]（https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/wheel#Listening_to_this_event_across_browser）。 – 2013-02-17 21:42:56

*「它適用於所有瀏覽器？」*。你不能自己測試嗎？ – 2013-02-17 22:46:19

加入德里克的觀點。在這些情況下，您應該真正評估瀏覽器兼容性。你可以用Modernizr（http://www.modernizr.com）來做到這一點。它會讓你的生活變得更輕鬆:) – 2013-02-17 22:49:36

下面是介紹這方面的文章，並給出了一個例子：

http://www.sitepoint.com/html5-javascript-mouse-wheel/

相關代碼，減去具體的例子調整圖像大小的給定：

var myitem = document.getElementById("myItem"); 
if (myitem.addEventListener) 
{ 
    // IE9, Chrome, Safari, Opera 
    myitem.addEventListener("mousewheel", MouseWheelHandler, false); 
    // Firefox 
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
} 
// IE 6/7/8 
else 
{ 
    myitem.attachEvent("onmousewheel", MouseWheelHandler); 
} 

function MouseWheelHandler(e) 
{ 
    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    return false; 
}

來源

2014-09-26 20:27:42 Almo

優秀的答案。需要更多的關注。在這個問題上的許多不完整的答案， – Terrance00 2017-02-07 06:16:55

鼠標滾輪事件是非標準的，MDN recommend wheel event。

var item = document.getElementById('item') 
item.addEventListener('mousewheel', function(e) { 
    console.log('event', e) 
}, false)

來源

2017-03-09 19:54:00

在現代瀏覽器中的鼠標滾輪事件

回答

相關問題