Saltar al contenido

¿Diferencia entre .click() y realmente hacer clic en un botón? (javascript/jQuery)

Verificamos completamente cada secciones de nuestro sitio web con la meta de mostrarte siempre información más veraz y actual.

Solución:

Antes de leer lo siguiente, que analiza cómo sortear el problema, déjame responder más detalladamente por qué tienes el problema para empezar:

Los navegadores modernos toman diferentes acciones para los enlaces en función de cosas como el botón del mouse con el que hizo clic, si mantuvo presionado Cambio / control / alternativa, y así. Como ejemplo, en Chrome, si hace clic con el botón central en un enlace en lugar de hacer clic con el botón izquierdo, el navegador abrirá automáticamente la ventana en una nueva pestaña.

cuando usas .click(), jQuery tiene que hacer suposiciones sobre la “forma” en la que hizo clic, y obtiene un comportamiento predeterminado, que en su caso, no es el comportamiento correcto. Debe especificar la configuración “correcta” para el navegador en forma de MouseEvents configuración para solucionar el problema.

Ahora, pasemos a una breve discusión sobre las formas de solucionarlo:

Cuando estás usando jQuery’s .click() evento sin parámetros, esto no es realmente “simular un clic” en el elemento en cuestión. En cambio, según la documentación de jQuery en http://api.jquery.com/click/ :

… Cuándo .click() se llama sin argumentos, es un atajo para .trigger(“clic”)

Esto significa que cuando disparas $('#div1').click() – si no hay un controlador jQuery real para el 'click' evento, obtendrá el procesamiento predeterminado. Entonces, considere estos dos casos:

Caso 1:

Click me!

En este primer escenario, el .click() call no hace nada, porque no hay un controlador para ello. El evento se dispara, pero no hay nada que lo atrape y responda, por lo que el a se utiliza el manejo predeterminado de la etiqueta y se lleva al usuario a /some/link/ – y dado que no ha especificado qué botón del mouse ni ningún otro parámetro, es realmente predeterminado.

Caso 2:

Click me!

En este escenario, debido a que un click se creó el controlador, cuando el usuario hace clic en el enlace – el ev.preventDefault() y ev.stopPropagation() las llamadas detendrán el manejo predeterminado y se activará la alerta.

En este punto, sin embargo, usted tiene una ev objeto que representa la MouseEvents – y puede cambiar la configuración si lo desea. Por ejemplo, podría hacer lo siguiente:

ev.altKey = true; // Held Alt
ev.button = 1;    // Middle Mouse Button

Esta configuración cambiará el método predeterminado para manejar el evento.

Solución alternativa, sin jQuery

También puede simular realmente un clic de botón adaptando el siguiente código.

function fakeClick(event, anchorObj) 
  if (anchorObj.click) 
    anchorObj.click()
   else if(document.createEvent) 
    if(event.target !== anchorObj) 
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser will.
    
  

(Para una implementación más completa, vea la publicación original en: ¿Cómo puedo simular un clic en una etiqueta de anclaje? – y mire la respuesta seleccionada)

En realidad, esto hará creer al navegador que hizo clic con el mouse en el ancla / intervalo / etc. al crear el evento desde cero de la misma manera que lo hacen los controladores predeterminados del navegador, excepto que puede anular algunas de las configuraciones. Sin embargo, no sugiero este enfoque, ya que es mucho más propenso a romperse en la aplicación de navegador cruzado y debe averiguar a qué se asignan todos los parámetros.

Uso esta función para imitar verdaderamente un clic del mouse:

function clickLink(link) 
    var cancelled = false;

    if (document.createEvent) 
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
        cancelled = !link.dispatchEvent(event);
    
    else if (link.fireEvent) 
        cancelled = !link.fireEvent("onclick");
    

  $('img').click(function(event)
    console.log(event.hasOwnProperty('originalEvent')); // output : true

  );
  $('img').trigger("click",function(event)
    console.log(event.hasOwnProperty('originalEvent')); // output : false

 );

Tienes la posibilidad compartir esta división si te valió la pena.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *