2011-10-16 9 views
9

Nella maggior parte dei browser su linux, CTRL + (RUOTA) SCROLL consente all'utente di ingrandire e ridurre la pagina ingrandendo o riducendo le dimensioni di tutti gli elementi. Ora voglio sovrascrivere questo comportamento e ottenere CTRL + WHEEL per ingrandire un elemento SVG che ho applicando le trasformazioni affini.Ignora browser CTRL + (RUOTA) SCROLL con javascript

È possibile? In particolare, è possibile prendere questo evento tastiera/mouse e sopprimere il comportamento predefinito del browser?

risposta

13

Ci sono molte difficoltà in una domanda come questa. In sostanza, ci sono due fasi:

  1. Ascoltate le keydown e keyup eventi, e tenere traccia di quando Ctrl è giù
  2. Ascolta per la rotellina del mouse, e (se Ctrl è giù) fare ciò che si vuole

Ma qui ci sono i problemi che devi affrontare:

  • Come applicherete i listener/handler dell'evento?
  • According to QuirksMode, i browser su Mac non restituiscono un codice di accesso esatto per Ctrl.
  • Also according to QuirksMode, Firefox non supporta l'evento mousewheel. Dovrai invece usare DOMMouseScroll.
  • According to the MDC, ci sono alcuni casi in cui l'evento DOMMouseScroll, se utilizzato con Ctrl, non viene mai nemmeno sparato!

Non sto dicendo che sono insormontabili, o anche che sono grossi problemi. L'utilizzo di una buona libreria JavaScript dovrebbe allontanare la maggior parte di essi, se non tutti. Essere selettivo nella scelta dei browser/sistemi operativi da supportare aiuterà anche un bel po ', se è fattibile.

Se dovessi farlo con jQuery (e a jQuery mousewheel plugin), che sarebbe simile a questa:

(function ($) { 
    var isCtrl = false; 

    function ctrlCheck(e) { 
     if (e.which === 17) { 
      isCtrl = e.type === 'keydown' ? true : false; 
     } 
    } 

    function wheelCheck(e, delta) { 
     // `delta` will be the distance that the page would have scrolled; 
     // might be useful for increasing the SVG size, might not 
     if (isCtrl) { 
      e.preventDefault(); 
      yourResizeMethod(delta); 
     } 
    } 

    $(document). 
     keydown(ctrlCheck). 
     keyup(ctrlCheck). 
     mousewheel(wheelCheck); 
}(jQuery)); 
1

https://developer.mozilla.org/en/Code_snippets/Miscellaneous#Detecting_mouse_wheel_events descrive come aggiungere un gestore per gli eventi rotellina del mouse in Firefox — tra cui, in teoria, gli eventi rotellina del mouse Ctrl + — ma si parla che se le preferenze degli utenti sono tali che un dato modificatore + combinazione rotella del mouse cambia la dimensione del testo, allora questi gli ascoltatori di eventi chiameranno non. Quindi, non sembra possibile (anche se non ho provato me stesso per confermare l'accuratezza di quella pagina).

Altri browser possono comportarsi in modo diverso, ovviamente. Se sei O.K. con esso non funziona in Firefox, puoi provare a registrare il gestore impostando window.onmousewheel.

2

Per aggiungere alla risposta di sdleihssirhc ... Invece di tenere traccia del tasto ctrl voi stessi può chiamare e.ctrlKey nel metodo wheelCheck (al posto di isCtrl). Questo restituirà true se il tasto ctrl non è attivo.

Non ho confermato questo funziona su altre piattaforme, ma in Windows funziona in Chrome, Explorer e FireFox.

Problemi correlati