使用Javascript在x軸（左側和右側）上檢測鼠標滾輪

我知道有可能檢測到上下偏移，使用Javascript在x軸（左側和右側）上檢測鼠標滾輪

function handle(delta) { 
    if (delta < 0) { 
     alert('down'); 
} else { 
    alert('up'); 
    } 
} 

function wheel(event){ 
    var delta = 0; 
    if (!event) event = window.event; 
    if (event.wheelDelta) { 
     delta = event.wheelDelta/120; 
    } else if (event.detail) { 
     delta = -event.detail/3; 
    } 
    if (delta) 
     handle(delta); 
     if (event.preventDefault) 
       event.preventDefault(); 
     event.returnValue = false; 
} 

/* Initialization code. */ 
if (window.addEventListener) 
    window.addEventListener('DOMMouseScroll', wheel, false); 
window.onmousewheel = document.onmousewheel = wheel;

但是有沒有一種方法來檢測用戶的鼠標是用鼠標左鍵還是右鍵？

來源

2012-05-30 bob_cobb

你想知道'鼠標'或'鼠標滾輪'是向左還是向右？並非所有鼠標滾輪都左右移動。 – aglassman

@aglassman好問題。只是鼠標滾輪。 –

@bob_cobb，你可能想重新審視你的批准答案，以[最投人最豐富的細節之一]（http://stackoverflow.com/a/12850780/1712065）。這有助於未來的訪問者找到正確的信息，並向你展示你甚至關心社區！ – Annie

Firefox中的DOMMouseWheel事件具有axis屬性。
Chrome中的mousewheel事件有wheelDeltaX和wheelDeltaY。
不幸的是，我找不到IE事件的任何等價物（在IE9上測試）。

來源

2012-05-30 18:38:44 apsillers

謝謝。我會看看我是否找不到適合IE的東西。 –

我相信你可以從

event.originalEvent.wheelDeltaX

找到「水平」或x軸數據應該調試代碼，看看有什麼性質的事件對象具有在運行時。這應該證實或否認該財產是否存在。從那裏，它只是一個檢測值是否不同的問題。

來源

2012-05-30 18:34:14 aglassman

看看這個答案。 http://stackoverflow.com/questions/8212851/detect-the-horizontal-mousewheel – aglassman

查看接受的答案以獲取更多鏈接和信息。

Bubbling scroll/mousewheel event

event.detail指定「滴答」鼠標滾輪移動的數目。

正值表示下/右」，負向上/左。

event.axis指定滾動手勢的軸線（水平或垂直）。在Firefox 3.5

加入該屬性Chrome瀏覽器實現了相同的行爲，據我所知IE在IE和Chrome：使用e.wheelDeltaX和e.wheelDeltaY

來源

2012-05-30 18:38:34 Knyri

的Internet Explorer：使用addEventListener在IE9和IE10你必須使用onwheel事件（不是onmousewheel，也不DOMMouseScroll），以便能夠從DOM檢測水平滾輪滾動。使用event.deltaX值和event.deltaMode值來檢測水平鼠標滾輪（對於垂直滾輪使用event.deltaY值）。對於< = IE8使用onmousewheel事件和event.wheelDelta（僅適用於舊IE版本的yaxis鼠標輪）。

Blink/Webkit：支持自Chrome 31/Safari 7以來的onwheel事件。否則使用onmousewheel事件和event.wheelDeltaX和event.wheelDeltaY屬性。 Chrome/Safari的唯一訣竅：在鼠標滾動向左/向右滾動時使用SHIFT鍵（用於測試）。

Firefox：Firefox 17及更高版本support the onwheel event。要支持舊版本的Firefox（回到3.6），請使用現在已棄用的DOMMouseScroll以及event.axis和event.detail屬性來支持水平滾動。（Firefox移動版：文檔暗示使用觸摸設備進行平移時，onwheel事件會觸發，但我沒有嘗試過）。 Firefox也有一個MozMousePixelScroll事件。 MDN文檔還提供了建議的代碼來處理跨瀏覽器的不同事件。 Firefox也有一個mousewheel.enable_pixel_scrolling配置，可能會影響所有不同的輪子事件。

Try the onwheel event out yourself使用來自QuirksMode的車輪事件測試器。我可以看到這個工作在Win7上使用IE9，在Windows 8上使用IE10（發佈預覽版，IE版本10.0.8400.0）。設置新的標準輪循事件：

選擇addEventListener（capture）radio。
不可滾動滾動。
解開鼠標滾輪。
讓車輪打勾。
勾選右列底部的顯示事件屬性。
使用F12並確認文檔處於documentMode IE9標準或IE10標準。
做一些鼠標在中心列上滾動，看到輪盤事件記錄在左欄，輪子事件詳細信息顯示在右欄底部。
有時你可能需要取消選中並retick輪事件複選框以獲取事件（不知道爲什麼：也許錯誤在怪異模式頁面或IE？）

的W3C specification，該Microsoft IE9 documentation for the MouseWheel event和MDN docs指定onwheel事件：

deltaX - 獲取鼠標滾輪已經繞x軸（水平）而旋轉的距離。
deltaY - 獲取鼠標滾輪圍繞y軸旋轉的距離（垂直）。
deltaZ - 獲取鼠標滾輪圍繞z軸旋轉的距離。
deltaMode - 獲取一個值，指示測量單位爲增量值：
- DOM_DELTA_PIXEL（0×00）默認值。增量以像素爲單位進行衡量。
- DOM_DELTA_LINE（0x01）增量以文本行進行度量。
- DOM_DELTA_PAGE（0x02）增量以文本頁面爲單位進行測量。

編輯：確保你不preventDefault（）方法的情況下，如果event.ctrlKey設置，否則你可能會阻止頁面縮放。顯然，如果你在Chrome和IE的觸摸板上使用捏縮放，ctrlKey設置爲true。

特徵檢測很難在IE：

在IE10與IE8 documentMode，'onwheel' in document返回true，但似乎沒有事件進行水平或垂直onwheel觸發的事件。
在IE9中'onwheel' in document返回false但onwheel事件起作用（我猜應該在使用IE9中的onwheel事件之前檢查document.documentMode === 9）。
在IE9和IE10中，傳統的document.onwheel = 'somefunc(event)'在documentMode 9或10中似乎不起作用（即看起來像只能使用addEventListener）。

要進行測試，請使用微軟的tiltwheel鼠標，滾動觸摸板（手勢或區域）或Apple設備（魔術鼠標或強大的鼠標滾動球）。在Windows中使用各種鼠標或觸控板設置進行播放（或者如果使用Safari在OSX上測試水平滾動，請在OSX上使用鼠標偏好設置）。

delta值的符號對於所有瀏覽器的onwheel和onmousewheel都有相反的符號。在IE中δ值，例如（使用我的dev機IE9具有非常標準的Microsoft鼠標）是用於onwheel onMouseUp和onMouseWheel不同：

event.deltaY是Win7上111上的Win8或72 onwheel事件向下滾動一個缺口。該值隨着縮放而略有變化，但還有一些其他因素也涉及到我無法解決的問題（似乎不是字體大小）。
event.wheelDelta爲-120爲onmousewheel事件向下滾動一個缺口。
對於Windows XP「我們必須添加對WM_MOUSEHWHEEL消息支持，使這項工作[，支持]在Vista中添加，所以如果你使用的是XP，你需要的IntelliType Pro和/或的IntelliPoint安裝」 - 按this article 。
各種常見的觸摸板和鼠標驅動程序破壞了瀏覽器的鼠標滾輪支持。打破瀏覽器檢測，或使用WM_HSCROLL和WM_VSCROLL消息而不是WM_MOUSEWHEEL和WM_MOUSEHWHEEL消息。因此，驅動程序不會在瀏覽器中生成輪子事件（無論您使用的是哪種瀏覽器，或者使用了哪個版本的Windows）。 A search of Bugzilla for WM_VSCROLL顯示可能影響任何瀏覽器（不僅僅是Firefox）的問題。

來源

2012-10-12 00:54:23 robocat

這個答案是迄今爲止我發現的最好的資源。感謝這項驚人的研究工作。 +1 – kikito

IE支持所有這些：mousewheel | onmousewheel它們是event handlers以及WheelEvent（提供DeltaX，DeltaY，DeltaZ），這是standard Event和MouseWheelEvent interface，這是在IE9 + also supported（具有WheelDelta和其他一些x， y座標相關屬性）。

測試IE11。

相關：今天當觸摸事件標準最終得到正式化後，結果IE11已經支持其中大部分：http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx。

除此之外：@bob_cobb，您可能需要重新審覈您贊成的most voted with most richer details one。這有助於未來的訪問者找到正確的信息，並向你展示你甚至關心社區！

來源

2015-02-25 04:02:01 Annie

使用Javascript在x軸（左側和右側）上檢測鼠標滾輪

回答

相關問題