javascript - obtiene - ¿Puedo llamar a jquery click() para seguir un enlace<a> si no he vinculado un controlador de eventos con el enlace o haga clic ya?
saber en que elemento se hizo click jquery (10)
Tengo un temporizador en mi JavaScript que necesita emular haciendo clic en un enlace para ir a otra página una vez que el tiempo transcurra. Para hacer esto, estoy usando la función click() jQuery. También he usado $().trigger() y window.location , y puedo hacerlo funcionar como estaba previsto con los tres.
He observado un comportamiento raro con el click() y trato de entender qué sucede y por qué.
Estoy usando Firefox para todo lo que describo en esta pregunta, pero también estoy interesado en lo que otros navegadores harán con esto.
Si no he usado $(''a'').bind(''click'',fn) o $(''a'').click(fn) para configurar un controlador de eventos, luego llame a $(''a'').click() parece no hacer nada en absoluto. No llama al controlador predeterminado del navegador para este evento, ya que el navegador no carga la página nueva.
Sin embargo, si configuro primero un controlador de eventos, funciona como se espera, incluso si el controlador de eventos no hace nada.
$(''a'').click(function(){return true;}).click();
Esto carga la nueva página como si hubiera hecho clic en el yo mismo.
Entonces mi pregunta es doble: ¿Es este comportamiento extraño porque estoy haciendo algo mal en alguna parte? y ¿por qué hacer click() no hace nada con el comportamiento predeterminado si no he creado un controlador propio?
EDITAR:
Como Hoffman determinó cuando trató de duplicar mis resultados, el resultado que describí anteriormente no sucede en realidad. No estoy seguro de qué causó los eventos que observé ayer, pero hoy estoy seguro de que no fue lo que describí en la pregunta.
Entonces la respuesta es que no puede "falsificar" clics en el navegador y que todo lo que jQuery hace es llamar a su controlador de eventos. Todavía puede usar window.location para cambiar de página, y eso funciona bien para mí.
Activar un elemento de hipervínculo que se encuentra dentro del elemento que desea conectar con jquery .click ()
<div class="TopicControl">
<div class="articleImage">
<a href=""><img src="" alt=""></a>
</div>
</div>
En su secuencia de comandos se conecta al contenedor principal en el que desea que se haga clic. Luego usa la metodología jquery estándar para encontrar el elemento (tipo, clase, id) y activa el clic. Lo que sucede es que jquery ingresa a una función recursiva para disparar el clic y usted rompe la función recursiva tomando el evento ''e'' y la función stopPropagation () y devuelve falso porque no desea que jquery haga otra cosa que disparar el enlace.
$(''.TopicControl'').click(function (event) {
$(this).find(''a'').click();
event.stopPropagation();
return false;
});
Una solución alternativa es envolver los contenedores en el elemento y colocarlos como contenedores dentro en lugar de ''s. Establezca los tramos en el bloque de visualización para cumplir con los estándares w3c.
Interesante, esta es probablemente una "solicitud de función" (es decir, error) para jQuery. El evento de clic de jQuery solo desencadena la acción de clic (llamada evento onClick en el DOM) en el elemento si vincula un evento jQuery al elemento. Deberías ir a las listas de correo de jQuery ( http://forum.jquery.com/ ) y reportar esto. Este podría ser el comportamiento deseado, pero no lo creo.
EDITAR:
Hice algunas pruebas y lo que dijiste es incorrecto, incluso si vinculas una función a una etiqueta ''a'', todavía no te lleva al sitio web especificado por el atributo href. Pruebe el siguiente código:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* Try to dis-comment this:
$(''#a'').click(function () {
alert(''jQuery.click()'');
return true;
});
*/
});
function button_onClick() {
$(''#a'').click();
}
function a_onClick() {
alert(''a_onClick'');
}
</script>
</head>
<body>
<input type="button" onclick="button_onClick()">
<br>
<a id=''a'' href=''http://www.google.com'' onClick="a_onClick()"> aaa </a>
</body>
</html>
Nunca va a google.com a menos que haga clic directamente en el enlace (con o sin el código comentado). También tenga en cuenta que incluso si vincula el evento click al enlace, no se vuelve púrpura una vez que hace clic en el botón. Solo se vuelve púrpura si hace clic directamente en el enlace.
Investigué un poco y parece que no se supone que el .click funcione con las etiquetas ''a'' porque el navegador no soporta el "clic falso" con javascript. Quiero decir, no puedes "hacer clic" en un elemento con javascript. Con las etiquetas ''a'' puede activar su evento onClick pero el enlace no cambiará de color (al color del enlace visitado, el valor predeterminado es violeta en la mayoría de los navegadores). Por lo tanto, no tendría sentido hacer que el evento $ () haga clic con etiquetas ''a'', ya que el hecho de ir al atributo href no forma parte del evento onClick, sino que está codificado en el navegador.
JS / jQuery no admite el comportamiento predeterminado de los enlaces "cliqueados" mediante programación.
Lo que puedes hacer es crear un formulario y enviarlo. De esta forma, no es necesario usar window.location o window.open , que a menudo los navegadores bloquean como ventanas emergentes no deseadas.
Este script tiene 2 métodos diferentes: uno que intenta abrir 3 pestañas / ventanas nuevas (abre solo 1 en IE y Chrome, más información a continuación) y otro que activa un evento personalizado al hacer clic en un vínculo.
Aquí es cómo:
HTML
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<button id="testbtn">Test</button><br><br>
<a href="https://google.nl">GOOGLE</a><br>
<a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
<a href="https://.com/">SO</a>
</body>
</html>
jQuery (script.js)
$(function()
{
// Try to open all 3 links by pressing the button
// - Firefox opens all 3 links
// - Chrome only opens 1 of them without popup warning
// - IE only opens 1 of them WITH popup warning
$("#testbtn").on("click", function()
{
$("a").each(function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
});
});
// Or click the link and fire a custom event
// (open your own window without following the link itself)
$("a").on("click", function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
// The location given in the link itself
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
// Prevent the link from opening normally
return false;
});
});
Lo que hace es para cada elemento de enlace:
- Crear un formulario
- Dale atributos
- Añádelo al DOM para que pueda ser enviado
- Envialo
- Elimina el formulario del DOM, eliminando todos los rastros * Inserta la risa malvada *
Ahora tiene una nueva pestaña / ventana que carga "https://google.nl" (o cualquier URL que desee, simplemente reemplácela). Lamentablemente, cuando intenta abrir más de una ventana de esta manera, obtiene una Popup blocked mensajes Popup blocked cuando intenta abrir la segunda (la primera todavía está abierta).
Más información sobre cómo llegué a este método se encuentra aquí:
Abrir una nueva ventana / pestaña sin usar window.open o window.location.href
Los manejadores de clic en las etiquetas de anclaje son un caso especial en jQuery.
Creo que podría confundirse entre el evento onclick del ancla (conocido por el navegador) y el evento click del objeto jQuery que envuelve la noción de DOM de la etiqueta de anclaje.
Puede descargar la fuente de jQuery 1.3.2 here .
Las secciones relevantes de la fuente son las líneas 2643-2645 (he dividido esto en varias líneas para que sea más fácil de comprender):
// Handle triggering native .onfoo handlers (and on links since we don''t call .click() for links)
if (
(!elem[type] || (jQuery.nodeName(elem, ''a'') && type == "click")) &&
elem["on"+type] &&
elem["on"+type].apply( elem, data ) === false
)
event.result = false;
No hace nada porque no hay eventos vinculados al evento. Si recuerdo correctamente, jQuery mantiene su propia lista de controladores de eventos que están vinculados a NodeLists para el rendimiento y otros fines.
Otra opción es, por supuesto, usar JavaScript javascript:
document.getElementById("a_link").click()
Para abrir un hipervínculo en la misma pestaña, use:
$(document).on(''click'', "a.classname", function() {
var form = $("<form></form>");
form.attr(
{
id : "formid",
action : $(this).attr("href"),
method : "GET",
});
$("body").append(form);
$("#formid").submit();
$("#formid").remove();
return false;
});
Puede usar jQuery para seleccionar el objeto jQuery para ese elemento. Luego, obtenga el elemento DOM subyacente y llame a su método click() .
por id
$("#my-link").each(function (index) { $(this).get(0).click() });
o use jQuery para hacer clic en un grupo de enlaces por clase de CSS
$(".my-link-class").each(function (index) { $(this).get(0).click() });
Si miras el código para la función $.click , $.click a que hay una declaración condicional que verifica si el elemento tiene oyentes registrados para el evento click antes de que continúe. ¿Por qué no simplemente obtener el atributo href del enlace y cambiar manualmente la ubicación de la página?
window.location.href = $(''a'').attr(''href'');
EDITAR: Esta es la razón por la que no hace clic, desde la función de trigger , jQuery source para la versión 1.3.2:
// Handle triggering native .onfoo handlers (and on links since we don''t call .click() for links)
if ( (!elem[type] || (jQuery.nodeName(elem, ''a'') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
event.result = false;
// Trigger the native events (except for clicks on links)
if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, ''a'') && type == "click") ) {
this.triggered = true;
try {
elem[ type ]();
// prevent IE from throwing an error for some hidden elements
} catch (e) {}
}
Después de llamar a los manejadores (si hay alguno) jQuery desencadena un evento en el objeto. Sin embargo, solo llama a los controladores nativos para eventos de clic si el elemento no es un enlace. Supongo que esto fue hecho a propósito por alguna razón. Esto debería ser cierto sin importar si un controlador de eventos está definido o no, por lo que no estoy seguro de por qué en su caso adjuntar un controlador de eventos causó que se llamara al controlador onClick nativo. Tendrás que hacer lo que hice y pasar por la ejecución para ver dónde se llama.
Si necesita esta característica para un caso o muy pocos casos. (toda su aplicación no requiere esta función) Preferiría dejar jQuery tal como está (por muchas razones, incluida la posibilidad de actualizar a versiones más recientes, CDN, etc.) y tener la siguiente solución alternativa:
// For modren Browsers
$(ele).trigger("click");
// Relaying on Paul Irish''s conditional class names http://bit.ly/HWIpAp (via HTML5 Boilerplate http://bit.ly/HUzi3I) where each IE version gets a class of its Version
$("html.ie7").length && (function(){
var eleOnClickattr = $(ele).attr("onclick")
eval(eleOnClickattr);
})()