Rilevamento rotellina del mouse sull'asse x (sinistra e destra) con Javascript

Question

So che è possibile rilevare su e giù, ad es.

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;​ 

Ma c'è un modo per rilevare se il mouse di un utente è andato a sinistra oa destra con la rotellina del mouse?

Answer 1

• L'evento DOMMouseWheel in Firefox ha una proprietà axis.

• L'evento mousewheel in Chrome ha wheelDeltaX e wheelDeltaY.

• Purtroppo non riesco a trovare alcun equivalente appropriato per eventi IE (test su IE9).

Answer 2

io credo che si possa trovare i dati 'orizzontali' o asse x da

event.originalEvent.wheelDeltaX 

Si dovrebbe eseguire il debug del codice, e vedere quali proprietà dell'oggetto evento ha in fase di esecuzione. Questo dovrebbe confermare o negare se quella proprietà esiste. Da lì, è solo questione di scoprire se il valore differisce.

Answer 3

Controllare la risposta accettata per ulteriori collegamenti e informazioni.

Bubbling scroll/mousewheel event

event.detail specifica il numero di "tick" che la ruota del mouse spostato.

valori positivi indicano giù/destra", negativo su/sinistra.

event.axis specifica l'asse del gesto di scorrimento (orizzontale o verticale). Questo attributo è stata aggiunta in Firefox 3.5

Chrome implementa lo stesso comportamento di IE per quanto ne so In IE e Chrome:. usano e.wheelDeltaX e e.wheelDeltaY

Answer 4

Internet Explorer: In IE9 e IE10 è necessario utilizzare l'evento onwheel (non l'OnMouseWheel, nè DOMMouseScroll) utilizzando addEventListener per essere in grado di rilevare lo scorrimento ruota orizzontale dal DOM. Utilizzare il valore event.deltaX insieme al valore event.deltaMode per rilevare la rotazione orizzontale del mouse (per le ruote verticali utilizzare il valore event.deltaY). Per < = IE8 utilizzare l'evento onmousewheel e event.wheelDelta (è supportata solo la rotellina del mouse yaxis per le versioni precedenti di IE).

Blink/Webkit: supporto da Chrome 31/Safari 7 per l'evento onwheel. In caso contrario, utilizzare l'evento onmousewheel e le proprietà event.wheelDeltaX e event.wheelDeltaY. Chrome/Safari solo trucco: utilizzando il tasto MAIUSC mentre rotellina del mouse scorre verso sinistra/destra (utile per il test).

Firefox: Firefox 17 e successive support the onwheel event. Per supportare le versioni precedenti di Firefox (di nuovo a 3.6) utilizzare l'ora deprecata DOMMouseScroll e le proprietà event.axis ed event.detail per supportare lo scorrimento orizzontale. (Firefox mobile: i documenti implicano che l'evento onwheel si attiva quando si esegue la panoramica utilizzando un dispositivo touch. Non l'ho provato.). Firefox ha anche un evento MozMousePixelScroll. La documentazione MDN offre anche il codice suggerito per gestire i diversi eventi tra i vari browser. Firefox ha anche una configurazione mousewheel.enable_pixel_scrolling che può influire su tutti gli eventi delle ruote.

Try the onwheel event out yourself utilizzando il tester evento ruota da QuirksMode. Ho potuto vedere questo funziona utilizzando IE9 su Win7 e IE10 su Windows 8 (anteprima di rilascio, versione 10.0.8400.0 di IE). Per impostare il nuovo evento onwheel standard:

• Selezionare la radio addEventListener (acquisizione).
• Deseleziona scorrimento.
• Deseleziona la rotellina del mouse.
• Lascia la ruota barrata.
• Tick mostra le proprietà dell'evento nella parte inferiore della colonna di destra.
• Utilizzare F12 e verificare che il documento sia in DocumentMode IE9 Standards o IE10 Standards.
• Fai scorrere il mouse sulla colonna centrale e osserva gli eventi della ruota che vengono registrati nella colonna di sinistra, mentre i dettagli dell'evento della ruota vengono visualizzati nella parte inferiore della colonna di destra.
• A volte potrebbe essere necessario deselezionare e retick la casella di controllo evento ruota per ottenere eventi (non so perché: forse bug nella pagina quirksmode o in IE?)

Il W3C specification, il Microsoft IE9 documentation for the MouseWheel event e la MDN docs specificare per il onwheel evento:

• deltaX - Ottiene la distanza che una ruota del mouse è ruotato intorno all'asse x (orizzontale).
• deltaY - Ottiene la distanza percorsa da una rotella del mouse attorno all'asse y (verticale).
• deltaZ - Ottiene la distanza percorsa da una rotella del mouse attorno all'asse z.
• deltaMode - Ottiene un valore che indica l'unità di misura dei valori delta:
  • DOM_DELTA_PIXEL (0x00) predefinito. Il delta è misurato in pixel.
  • DOM_DELTA_LINE (0x01) Il delta è misurato in righe di testo.
  • DOM_DELTA_PAGE (0x02) Il delta viene misurato in pagine di testo.

Edit: fare in modo di non preventDefault() l'evento se event.ctrlKey è impostato, altrimenti si avrà probabilmente prevenire page zoom. Anche apparentemente il ctrlKey è impostato su true se si utilizza lo zoom pizzico su un touchpad in Chrome e IE.

rilevamento Caratteristica è difficile in IE:

• In IE10 con IE8 documentMode, 'onwheel' in document restituisce vero, ma sembra che non eventi vengono generati per l'evento onwheel orizzontale o verticale.
• In IE9 'onwheel' in document restituisce false ma l'evento onwheel funziona (suppongo che sia necessario verificare document.documentMode === 9 prima di utilizzare l'evento onwheel in IE9).
• In IE9 e IE10 il tradizionale document.onwheel = 'somefunc(event)' non sembra funzionare anche in documentMode 9 o 10 (ad esempio, sembra possibile utilizzare solo addEventListener).

Per eseguire il test, utilizzare un mouse tiltwheel Microsoft, un touchpad a scorrimento (gesto o zona) o un dispositivo Apple (mouse magico o mouse rotante potente). Gioca con varie impostazioni del mouse o del touchpad in Windows (o le preferenze del mouse su OSX se testate lo scorrimento orizzontale su OSX con Safari).

I segni dei valori delta hanno il segno opposto per onwheel e onmousewheel per tutti i browser. In IE i valori delta sono diversi per onwheel e OnMouseWheel, ad esempio, (usando la mia macchina dev con IE9 con un mouse Microsoft molto standard):

• event.deltaY era 111 su Win8 o 72 su Win7 per onwheel evento scorrimento verso il basso uno tacca. Il valore cambia leggermente con lo zoom, ma ci sono anche altri fattori che non riesco a capire (non sembra essere la dimensione del font).

• event.wheelDelta era -120 per onmousewheel evento che scorre verso il basso di una tacca.

• Per Windows XP "dobbiamo aggiungere il supporto per il messaggio WM_MOUSEHWHEEL a fare quel lavoro [supporto] è stato aggiunto in Vista, quindi se si sta utilizzando XP, è necessario IntelliType Pro e/o IntelliPoint installato" - come da this article .

• Vari driver di touchpad e mouse comuni interrompono il supporto della rotellina del mouse per i browser, ad es. rilevamento del browser non funzionante o utilizzo dei messaggi WM_HSCROLL e WM_VSCROLL invece dei messaggi WM_MOUSEWHEEL e WM_MOUSEHWHEEL. Quindi i driver non generano eventi wheel nel browser (indipendentemente dal browser utilizzato o dalla versione di Windows utilizzata). A search of Bugzilla for WM_VSCROLL mostra problemi che potrebbero interessare qualsiasi browser (non solo Firefox).

Answer 5

IE supporta tutti: mousewheel | onmousewheel che sono il event handlers nonché WheelEvent (fornisce DeltaX, DeltaY, DeltaZ) che è il standard Event e MouseWheelEvent interface, che è also supported in IE9 + (con WheelDelta e vari altri x, y coordinate relative proprietà).

Testato su IE11.

Correlati: oggi, quando lo standard di eventi touch viene finalmente formalizzato, risulta che IE11 supporta già la maggior parte di esso: http://blogs.msdn.com/b/ie/archive/2015/02/24/pointer-events-w3c-recommendation-interoperable-touch-and-removing-the-dreaded-300ms-tap-delay.aspx.

A parte: @bob_cobb, è possibile rivedere la risposta approvata a favore di most voted with most richer details one. Questo per aiutare il visitatore futuro a trovare le informazioni corrette e a mostrarti anche per la comunità!