JS HTMLElement.click() nie działa

Question

Ma ktoś pomysł czemu na tej stronce gdy w konsoli wrzucę taki kod:

document.querySelector('#root > div > div:nth-child(4) > div.hero').click()

to nic się nie dzieje?

A jeśli robię coś nie tak to jak kliknąć ten przycisk z poziomu JS?

Answer 1

A czy klik jest na pewno przypięty do .hero czy może do któregoś z jego dzieci? Devtools pokażą, gdzie są jakieś eventy.

Comments

Faktycznie jest podpięty pod jeden div głębiej co nie zmienia faktu, że ani .click() ani .dispatchEvent(new MouseEvent('click')) nie działają

---

Okazuje się, że to wcale nie było zdarzenie click, tylko zdarzenie mousedown. Dodatkowo musi bąbelkować – inaczej React go nie wykryje. Zatem:

const evt = new MouseEvent( 'mousedown', { bubbles: true } );
document.querySelector( '.prompt div:last-of-type' ).dispatchEvent( evt );

 

---

mousedown testowałem, ale bubbles bym się raczej nie domyślił. Dzięki 

Answer 2

metoda click() należy do biblioteki jQuery i działa z obiektami typu jQuery.

Aby wykorzystać metodę click() musisz pobrać element ze strony jako obiekt jQuery, czyli za pomocą

$('#root > div > div:nth-child(4) > div.hero').click(() => {
 alert( "Handler for .click() called." );
});

Jeżeli nie używasz jQuery to musisz użyć innego odwołania:

let hero = document.querySelector('#root > div > div:nth-child(4) > div.hero');

hero.addEventListener('click', (e) => {
 alert( "Handler for click event called." );
}, false);

 

Comments

Myślałem, że korzystam z tego:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
co nie wygląda na Jquery tylko podstawowy DOM.

---

Tak, tylko w dokumentacji napisane jest, że metoda click() działa tylko z elementem <input> . Do reszty elementów już musisz użyć raczej normalnego eventListener'a

---

click działa na każdym elemencie! https://html.spec.whatwg.org/multipage/interaction.html#dom-click

---

Pomijam fakt, że addEventListener nie wywołuje zdarzenia, tylko przypina listener – co w tym wypadku nie ma sensu. Jak już to dispatchEvent.

---

Ok widocznie źle zrozumiałem pytanie, lub było źle sformułowane

---

@Comandeer - Ja czytałem dokumentację  tutaj:
https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
Co zrozumiałem źle? 

 

Simulate a mouse-click. For INPUT elements whose type attribute has one of the following values: "button", "checkbox", "radio", "reset", or "submit".

Symuluje event click dla elementów INPUT o atrybutach [...].

Gdzie popełniłem błąd w zrozumieniu tej dokumentacji, skoro metoda symulująca click() działa na każdym elemencie?

---

Błąd polega na tym, że to jest stara specyfikacja DOM. Obecnie click jest definiowany bezpośrednio w specyfikacji HTML, a jego definicja brzmi zupełnie inaczej (przytaczam ją wyżej).