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

Question

Estoy tratando de resolver este extraño problema que he tenido, y la causa raíz es la diferencia entre un clic en vivo y la activación de .click().

No entraré en los detalles del problema, pero básicamente cuando haces clic en el botón de entrada funciona bien (tiene un evento onclick). Pero si llamo al .click() desde otro lugar (en lugar de hacer clic físicamente en el botón) no funciona correctamente.

Mi pregunta es: ¿hay alguna manera de replicar realmente un clic real en un botón?

---

EDITAR

El problema: Estoy abriendo una nueva ventana (aspx) que carga una línea PDF. Si realmente hago clic en el enlace, la ventana se abre correctamente y se carga el PDF. Si utilizo .click(), se abre la ventana y se me pide que descargue el archivo PDF. He revisado la configuración de Adobe Reader, la configuración del navegador y la configuración del registro acerca de las indicaciones: entiendo que estos pueden ser factores para una visión global, pero ahora estoy preocupado por el comportamiento entre un clic del mouse y un clic.() están haciendo algo diferente en absoluto.

Answer 1

puedo utilizar esta función para imitar realmente un clic del ratón:

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"); 
    } 
} 

Answer 2

Antes de leer el siguiente, que explica cómo evitar el problema, vamos a contestar con más detalle por qué usted está teniendo el problema, para empezar :

navegadores modernos toman diferentes acciones para los enlaces basados ​​en cosas como qué botón del ratón se hace clic con, si usted llevó a cabo Shift/Ctrl/Alt, y así sucesivamente. 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 pestaña nueva.

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

Ahora, a un corto debate sobre las formas de solucionarlo:

Cuando se utiliza el evento de jQuery .click() sin parámetros, esto no es en realidad "falsificar un clic" sobre el elemento en cuestión. En cambio, según la documentación de jQuery en http://api.jquery.com/click/:

... .click() cuando se llama sin argumentos, se trata de un acceso directo para .trigger ("clic")

Esto significa que cuando el fuego $('#div1').click() - si no existe un controlador jQuery real para el evento 'click', obtendrá el procesamiento predeterminado.Por lo tanto, tenga en cuenta estos dos casos:

Caso 1:

<a id='myLink' href='/some/link/'>Click me!</a> 
<script type='text/javascript'> 
    $('#myLink').click(); 
</script> 

En este primer escenario, la llamada .click() no hace nada, porque no hay ningún controlador para él. El evento se desencadena, pero no hay nada que captar y responder, por lo que se usa el manejo predeterminado de la etiqueta a, y el usuario se lleva al /some/link/, y como no se ha especificado qué botón del mouse ni ningún otro parámetro, es realmente predeterminado.

Caso 2:

<a id='myLink' href='/some/link/'>Click me!</a> 
<script type='text/javascript'> 
    $('#myLink').bind('click', function (ev) { 
     ev.preventDefault(); 
     ev.stopPropagation(); 

     alert('you clicked me!'); 
    }).click(); 
</script> 

En este escenario, porque un controlador de click fue creado, cuando el usuario hace clic en el enlace - los ev.preventDefault() y ev.stopPropagation() llamadas detendrán el defecto manejo de occuring, y la alerta será despedido.

En este punto, sin embargo, tiene un objeto ev que representa el 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.

alternativas, la solución no jQuery

Puede también verdaderamente simular un botón del rató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 aplicación más completa, ver el post original en: How can I simulate a click to an anchor tag? - y mirar la respuesta seleccionada)

esto va a fingir el navegador en la creencia de que el ratón hace clic con el ancla/span/etc construyendo el evento desde cero de la misma manera que lo hacen los manejadores predeterminados del navegador, excepto que puede anular algunas de las configuraciones. No sugiero este enfoque, sin embargo, ya que es mucho más propenso a interrumpir la aplicación entre navegadores y debes averiguar a qué se refieren todos los parámetros.

Answer 3

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

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

});