2011-10-16 22 views
9

En la mayoría de los navegadores en linux, CTRL + (RUEDA) SCROLL permite al usuario acercar y alejar la página ampliando o reduciendo el tamaño de todos los elementos. Ahora quiero anular este comportamiento y obtener CTRL + WHEEL para acercarme a un elemento SVG que tengo aplicando transformaciones afines.Anular navegadores CTRL + (RUEDA) DESPLAZAR con javascript

¿Esto es posible? Específicamente, ¿es posible atrapar este evento de teclado/mouse y también suprimir el comportamiento predeterminado del navegador?

Respuesta

13

Hay muchas dificultades en una pregunta como esta. Básicamente, hay dos pasos:

  1. escuchar el keydown y keyup eventos, y realizar un seguimiento de cuándo Ctrl está abajo
  2. Escucha de la rueda del ratón, y (si Ctrl está abajo) hacer lo que quiere

Pero aquí están los problemas que hay que abordar:

  • ¿Cómo va a aplicar los detectores/controladores de eventos?
  • According to QuirksMode, los navegadores en Mac no devuelven un código de clave preciso para Ctrl.
  • Also according to QuirksMode, Firefox no admite el evento mousewheel. En su lugar, tendrá que usar DOMMouseScroll.
  • According to the MDC, hay algunos casos en los que el evento DOMMouseScroll, cuando se usa con Ctrl, ¡nunca se dispara!

No estoy diciendo que sean insuperables, o incluso que sean un gran problema. El uso de una buena biblioteca de JavaScript debería abstraer la mayoría de ellos, si no todos. Ser selectivo en su elección de navegadores/sistemas operativos para apoyar también ayudará bastante, si eso es factible.

Si tuviera que hacer esto con jQuery (y a jQuery mousewheel plugin), se vería algo como esto:

(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 describe cómo agregar un controlador para eventos rueda del ratón en Firefox — incluyendo, en teoría, eventos rueda del ratón Ctrl + — pero se menciona que si las preferencias del usuario son tales que una combinación rueda del ratón + modificador dada cambia el tamaño de la letra, entonces estos event-listeners se llamará not. Por lo tanto, no parece posible (aunque no me he probado para confirmar la precisión de esa página).

Otros navegadores pueden comportarse de manera diferente, por supuesto. Si eres O.K. Si no funciona en Firefox, puedes intentar registrar tu controlador configurando window.onmousewheel.

2

para añadir a la respuesta de sdleihssirhc ... En vez de hacer el seguimiento de la tecla CTRL sí mismo que puede llamar a e.ctrlKey en el método wheelCheck (en lugar de isCtrl). Esto volverá verdadero si la tecla ctrl estaba abajo.

No he confirmado que esto funcione en otras plataformas, pero en Windows funciona en Chrome, Explorer y Firefox.

Cuestiones relacionadas