que - llamar javascript desde html
¿Cómo puedo simular un clic en una etiqueta de anclaje? (5)
Quiero simular un clic en una etiqueta de anclaje con todos los extras, como el manejo correcto del objetivo.
Parece que hay un método "[clic ()] [3]" para el objeto DOM del ancla, pero no todos los navegadores lo admiten. Firefox arroja este error:
Error: anchorObj.click no es una función
También funciona de forma extraña en Opera 10 y Konqueror, lo que provoca que se produzcan clics infinitos cuando se llama dentro del controlador onclick de un div circundante. Supongo que solo IE8 funciona bien con eso. De todos modos, no lo quiero, ya que los navegadores principales en su mayoría tienen problemas con él.
Encontré esta solución alternativa para Firefox en los foros de Mozilla:
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
anchorObj.dispatchEvent(evt);
Esto parece demasiado feo y engorroso para mí. No sé qué tan compatible es y quiero evitar escribir el código específico del navegador tanto como sea posible.
No puedo usar location.href = anchorObj.href; porque no maneja el atributo "objetivo". Puedo hacer una codificación difícil en función del valor del objetivo, pero me gustaría evitar eso también.
Existe la sugerencia de cambiar a JQuery, pero no estoy seguro de qué tan bien maneja la propiedad del objetivo, ya que no he trabajado con él antes.
Aquí hay un caso de prueba completo que simula el evento click , llama a todos los manejadores conectados (sin embargo han sido adjuntados), mantiene el atributo "target" ( "srcElement" en IE), burbujea como un evento normal y emula la recursión de IE prevención. Probado en FF 2, Chrome 2.0, Opera 9.10 y, por supuesto, IE (6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
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.
}
}
}
</script>
</head>
<body>
<div onclick="alert(''Container clicked'')">
<a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById(''link''))">
Fake Click on Normal Link
</button>
<br /><br />
<div onclick="alert(''Container clicked'')">
<div onclick="fakeClick(event, this.getElementsByTagName(''a'')[0])"><a id="link2" href="#" onclick="alert(''foo'')">Embedded Link</a></div>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById(''link2''))">Fake Click on Embedded Link</button>
</body>
</html>
Evita la recursividad en buscadores que no sean IE al inspeccionar el objeto de evento que está iniciando el clic simulado, al inspeccionar el atributo de target del evento (que permanece inalterado durante la propagación ).
Obviamente, IE hace esto internamente sosteniendo una referencia a su objeto event global . DOM nivel 2 no define ninguna variable global, por lo que el simulador debe pasar en su copia local de event .
Citado de https://developer.mozilla.org/en/DOM/element.click
El método de clic está destinado a ser utilizado con los elementos INPUT de tipo botón, casilla de verificación, radio, restablecer o enviar. Gecko no implementa el método de clic en otros elementos que se espera que respondan a los clics del mouse, como los enlaces (elementos A), ni dispara necesariamente el evento click de otros elementos.
Los DOM no Gecko pueden comportarse de manera diferente.
Lamentablemente, parece que ya has descubierto la mejor solución para tu problema.
Como nota al margen, estoy de acuerdo en que su solución parece menos que ideal, pero si encapsula la funcionalidad dentro de un método (al igual que lo haría JQuery) no es tan malo.
Hay una manera más simple de lograrlo,
HTML
<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>
JavaScript
// Simulating click after 3 seconds
setTimeout(function(){
document.getElementById(''fooLinkID'').click();
}, 3 * 1000);
Usar javascript simple para simular un clic junto con el direccionamiento de la propiedad de destino.
Puede verificar el ejemplo de trabajo aquí en jsFiddle .
Ninguna de las soluciones anteriores aborda la intención genérica de la solicitud original. ¿Qué pasa si no conocemos la identificación del ancla? ¿Qué pasa si no tiene una identificación? ¿Qué sucede si ni siquiera tiene un parámetro href (por ejemplo, icono anterior / siguiente en un carrusel)? ¿Qué pasa si queremos aplicar la acción a múltiples anclajes con diferentes modelos de manera agnóstica? Aquí hay un ejemplo que hace algo en lugar de un clic, luego simula el clic (para cualquier ancla u otra etiqueta):
var clicker = null;
$(''a'').click(function(e){
clicker=$(this); // capture the clicked dom object
/* ... do something ... */
e.preventDefault(); // prevent original click action
});
clicker[0].click(); // this repeats the original click. [0] is necessary.
bueno, puedes probar el despacho de clics muy rápidamente a través de jQuery como tal
$(''#link-id'').click();
Si sigues teniendo problemas para hacer clic respetando el objetivo, siempre puedes hacerlo
$(''#link-id'').click( function( event, anchor )
{
window.open( anchor.href, anchor.target, '''' );
event.preventDefault();
return false;
});