Różnica między .click() a kliknięciem przycisku? (javascript/jQuery)

Question

Próbuję rozgryźć ten dziwny problem, który miałem, a główną przyczyną jest różnica między kliknięciem na żywo i wyzwalaniem .

Nie będę wchodził w szczegóły problemu, ale w zasadzie po kliknięciu przycisku wejścia działa dobrze (ma zdarzenie onclick). Ale jeśli zadzwonię pod numer .click() z innego miejsca (zamiast fizycznego kliknięcia przycisku), to nie działa poprawnie.

Moje pytanie brzmi - czy istnieje sposób, aby naprawdę powielić faktyczne kliknięcie przycisku?

---

EDIT

Problem: Mam otwierania nowego okna (strona aspx), który ładuje inline PDF. Jeśli kliknę link, okno zostanie otwarte, a plik PDF zostanie załadowany. Jeśli użyję .click(), otworzy się okno i zostanie wyświetlony monit o pobranie pliku PDF. Przejrzałem ustawienia Adobe Reader, ustawienia przeglądarki i ustawienia rejestru dotyczące podpowiedzi - Rozumiem, że mogą to być czynniki wpływające na ogólny obraz, ale teraz jestem zaniepokojony, dlaczego zachowanie między kliknięciem myszy i .click() robią coś zupełnie innego.

Answer 1

użyć tej funkcji, aby prawdziwie naśladować kliknięcie myszą:

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

Przed zapoznaniem się z dołu, który omawia, jak obejść ten problem, pozwól mi odpowiedzieć dokładniej dlaczego masz problem, aby rozpocząć :

Nowoczesne przeglądarki podjąć różne działania dla połączeń opartych na rzeczy, które tak jak ty kliknęli przycisk myszy z, czy odbyło SHIFT/Ctrl/Alt, i tak dalej. Na przykład w przeglądarce Chrome kliknięcie lewym przyciskiem myszy łącza zamiast kliknięcia lewym przyciskiem spowoduje automatyczne otwarcie okna w nowej karcie.

Kiedy używasz .click(), jQuery musi przyjąć założenia dotyczące "sposobu", w który kliknąłeś - i dostajesz domyślne zachowanie - które w twoim przypadku nie jest właściwym zachowaniem. Musisz określić "poprawne" ustawienia przeglądarki w postaci ustawień MouseEvents w celu rozwiązania problemu.

Teraz na krótkim omówieniu sposobów, aby to naprawić:

Kiedy używasz .click() zdarzenie jQuery bez parametrów, nie jest to faktycznie „udaje” na kliknięcie elementu w pytaniu. Zamiast tego, zgodnie z dokumentacją jQuery na http://api.jquery.com/click/:

... Kiedy .click() nazywa bez argumentów, że jest to skrót dla .trigger ("kliknięcie")

Oznacza to, że kiedy ogień $('#div1').click() - jeśli nie ma faktycznej obsługi jQuery dla zdarzenia 'click', otrzymasz domyślne przetwarzanie.Więc pod uwagę dwa przypadki:

Przypadek 1:

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

W tym pierwszym scenariuszu wezwanie .click() nic nie robi, bo nie ma dla niego obsługi. Zdarzenie uruchamia się, ale nie ma nic, co mogłoby go przechwycić i odpowiedzieć - dlatego domyślna obsługa znacznika a jest używana, a użytkownik zostaje przeniesiony do /some/link/ - a ponieważ nie określono, który przycisk myszy ani żadnych innych parametrów - jest naprawdę domyślny.

Przypadek 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> 

W tym scenariuszu, ponieważ click obsługi został stworzony, gdy użytkownik kliknie w link - The ev.preventDefault() i ev.stopPropagation() połączenia przestanie domyślną obsługę od występującego, a wpisowi zostaną zwolnieni.

W tym momencie jednak masz obiekt ev, który reprezentuje- i możesz zmienić ustawienia, jeśli chcesz. Na przykład możesz wykonać następujące czynności:

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

Te ustawienia zmienią domyślną metodę obsługi zdarzenia.

Alternatywa, rozwiązanie non-jQuery

Można również naprawdę symulować kliknięcie przycisku dostosowując poniższy kod.

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. 
    } 
    } 
} 

(Dla bardziej pełnego wdrożenia, zobaczyć oryginalny post w: How can I simulate a click to an anchor tag? - i spojrzeć na wybranej odpowiedzi)

to będzie rzeczywiście fałszywy przeglądarkę do przypuszczeń, że mysz kliknięciu kotwicy/span/etc przez budowanie zdarzenia od zera w taki sam sposób, jak robią to domyślne programy przeglądarki - z wyjątkiem tego, że można zmienić niektóre ustawienia. Nie sugeruję tego podejścia, ponieważ jest ono o wiele bardziej podatne na włamywanie się do różnych aplikacji przeglądarkowych i trzeba się zorientować, na jakie wszystkie parametry się odwzorowują.

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 

});