0

Poseo el siguiente código para alejar o acercar (ZOOM IN, ZOOM OUT) con un click en Javascript

Para acercar:

    window.onclick = function(e) {
    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,
        oz = current.zoom,
        nz = (current.zoom *= coef),
        /// calculate click at current zoom
        ix = (e.clientX - current.x) / oz,
        iy = (e.clientY - current.y) / oz,
        /// calculate click at new zoom
        nx = ix * nz,
        ny = iy * nz,
        /// move to the difference
        cx = (current.x = ix - nx),
        cy = (current.y = iy - ny)
    ;
    /// make sure we translate before scale!
    con.style.transform
        = 'translate('+cx+'px, '+cy+'px) '
        + 'scale('+nz+')'
    ;
};

Para alejar:

    window.onclick = function(e) {
    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,
        oz = current.zoom,
        nz = (current.zoom *= coef),
        /// calculate click at current zoom
        ix = (e.clientX - current.x) / oz,
        iy = (e.clientY - current.y) / oz,
        /// calculate click at new zoom
        nx = ix * nz,
        ny = iy * nz,
        /// move to the difference
        cx = (current.x = ix - nx),
        cy = (current.y = iy - ny)
    ;
    /// make sure we translate before scale!
    con.style.transform
        = 'translate('+cx+'px, '+cy+'px) '
        + 'scale('+nz+')'
    ;
};

Ahora, deseo un simple cambio, según el botón pulsado realizar el alejamiento y el alejamiento. Al pulsar el botón izquierdo realizar el acercamiento, al pulsar el botón derecho alejar. Todo esto conservando el código de acercamiento y alejamiento que presento arriba. Alguna sugerencia?

1 respuesta 1

0

Por lo que se está preguntando es acerca de cómo diferenciar con cual botón se hizo clic. Para ello nos sirve el evento mousedown el cual asigna a la propiedad which los valores siguientes:

1: Si se hace clic con el botón izquierdo.
2: Si se hace clic con el botón central.
3: Si se hace clic con el botón derecho.

A continuación un ejemplo sencillo:

Se muestra un mensaje de alerta específico según se haga clic con el botón izquierdo, central o derecho sobre el texto.

var zona = document.getElementById('zona');
zona.addEventListener('mousedown',valida);
function valida(e){
  switch(e.which){
    case 1:
      alert('¡Error! Hiciste click con el botón izquierdo');
      break;
    case 2:
      alert('¡Error! Hiciste click con el botón central');
      break;
    case 3:
      alert('¡Correcto!');
      break;
  }
}
<div id="zona">Haz clic con el botón derecho aquí</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.