Jak mogę symulować kliknięcie znacznika zakotwiczenia?

Question

Jak mogę symulować kliknięcie znacznika zakotwiczenia?

Chcę symulować kliknięcie znacznika zakotwiczenia ze wszystkimi dodatkami, takimi jak poprawna obsługa celu.

Wydaje się, że istnieje metoda "[click()][3]" dla obiektu DOM anchora, ale nie wszystkie przeglądarki to obsługują. Firefox wyrzuca ten błąd:

Błąd: anchorObj.click is not a function

Działa również dziwnie na Operze 10 i Konquerorze, powodując nieskończone kliknięcia, gdy jest wywoływany wewnątrz onclick obsługi otaczającego div. Chyba tylko IE8 działa dobrze z nim. W każdym razie nie chcę go, ponieważ główne przeglądarki głównie mają z nim problemy.

Znalazłem to alternatywne rozwiązanie dla Firefoksa na forach Mozilli:

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

To wydaje mi się zbyt brzydkie i uciążliwe. Nie wiem, jak jest kompatybilny i chcę uniknąć pisania kodu specyficznego dla przeglądarki, jak to możliwe. Nie mogę użyć lokalizacji.href = ""href; ponieważ nie obsługuje atrybutu "target". Mogę zrobić trochę twardego kodowania na podstawie wartości docelowej, ale chciałbym tego uniknąć, ponieważ cóż.

Jest sugestia przejścia na JQuery, ale nie jestem pewien, jak dobrze radzi sobie z właściwościami docelowymi, ponieważ wcześniej z nimi nie pracowałem.

44

javascript html dom

Author: Sedat Kapanoglu, 2009-09-14

Source

5 answers

Cóż, można bardzo szybko przetestować wysyłanie kliknięć przez jQuery TAK

$('#link-id').click();

Jeśli nadal masz problem z kliknięciem, zawsze możesz to zrobić

$('#link-id').click( function( event, anchor )
{
  window.open( anchor.href, anchor.target, '' );
  event.preventDefault();
  return false;
});

11

Author: Peter Bailey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-14 14:04:22

Cytat z https://developer.mozilla.org/en/DOM/element.click

Metoda click jest przeznaczona do użycia z elementami wejściowymi typu button, checkbox, radio, reset lub submit. Gecko nie implementuje metody click na innych elementach, które mogą odpowiadać na kliknięcia myszką, takie jak linki (elementy), ani nie będzie uruchamiać zdarzenia click innych elementów.

Dom nie–Gecko może zachowywać się inaczej.

Niestety wygląda na to, że już odkryłeś najlepsze rozwiązanie swojego problemu.

Na marginesie zgadzam się, że Twoje rozwiązanie wydaje się mniej niż idealne, ale jeśli zamkniesz funkcjonalność wewnątrz metody (podobnie jak jQuery), nie jest tak źle.

11

Author: Chris Shouts,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-14 14:05:38

Jest prostszy sposób, aby to osiągnąć,

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

Używanie zwykłego javascript do symulacji kliknięcia wraz z adresowaniem właściwości docelowej.

Możesz sprawdzić działający przykład tutaj na jsFiddle.

5

Author: Gaurav Gandhi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-11 16:20:22

Żadne z powyższych rozwiązań nie odnosi się do ogólnej intencji pierwotnego wniosku. A jeśli nie znamy tożsamości kotwicy? A jeśli nie ma dowodu? Co jeśli nie ma nawet parametru href (np. ikonki prev/next w karuzeli)? Co zrobić, jeśli chcemy zastosować akcję do wielu kotwic z różnymi modelami w agnostyczny sposób? Oto przykład, który robi coś zamiast kliknięcia, a następnie symuluje kliknięcie (dla dowolnego zakotwiczenia lub innego tagu):

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.

0

Author: Vision Hive,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-12 06:11:54

score 62 · Accepted Answer

Oto kompletny przypadek testowy, który symuluje Zdarzenie click, wywołuje wszystkie dołączone programy obsługi (jakkolwiek zostały dołączone), utrzymuje atrybut "target" ("srcElement" W IE), bąbelki jak normalne Zdarzenie i emuluje rekursję IE. Testowane w FF 2, Chrome 2.0, Opera 9.10 i oczywiście 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>

Demo tutaj.

Unika rekursji w przeglądarkach innych niż IE, sprawdzając obiekt event, który inicjuje symulowane kliknięcie, sprawdzając target atrybut zdarzenia (który pozostaje niezmieniony podczas propagacji ).

Oczywiście IE robi to wewnętrznie trzymając odniesienie do swojego globalnegoevent obiektu . DOM level 2 nie definiuje takiej zmiennej globalnej, więc z tego powodu symulator musi przejść w lokalnej kopii event.