Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Prosty skrypt JS

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Prosty skrypt JS

Post 05.01.2017, 19:48:12

Witam. Mam taki banalny skypt wysuwanego menu po kliknięciu:

Kod: Zaznacz cały
   /* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


Chciałbym go tak zmodyfikować, żeby menu chowało się po kliknięciu tylko w button, który otwiera to menu, a nie byle gdzie. Kombinowałem na rózne sposoby, ale moja znajomość js niestety jest zbyt krucha. :( Z góry dziękuję za pomoc.
Dejwidson
Posty: 2
Dołączył(a): 05.01.2017

Re: Prosty skrypt JS

Post 08.01.2017, 01:01:34

Witam,
cała funkcja obsługująca chowanie się menu jest przypisana do zdarzenia 'onclick' obiektu window, a więc w tym wypadku całego okna. Musisz przypisać obsługę zdarzenia do tego konkretnego przycisku.
Proponuję najpierw w zmiennej zapisać referencję do przycisku, który ma zamykać okno, a następnie na nim zrobić nasłuchiwanie zdarzenia kliknięcia, czyli zamiast window.onclick byłoby jakis_button.onclick = ...

I tak na marginesie dwie małe uwagi:
1. metoda getElementsByClassName obiektu document nie jest obsługiwana w IE starszych niż 9, a niestety IE8 nadal jest w użytku więc osobiście polecam zrezygnować z jej stosowania, np. używając getElementById lub bardziej uniwersalną (acz wolniejszą) querySelector, ewentualnie querySelectorAll jeśli wybierasz kilka elementów. Metody te są obsługiwane w IE8.

2. proponuję zapoznać się z metodą addEventListener do przypisywania obsługi zdarzeń na obiektach DOM. Dla IE8 trzeba użyć attachEvent, ale można łatwo stworzyć sobie metodę (np. addEvent) automatycznie dobierającą daną metodę w zależności od jej dostępności w przeglądarce (jest to de facto jedno z częściej spotykanych zadań w wielu książkach o JS).

Metody z pkt. 2 mają jedna, dużą przeagę nad przypisywaniem w stylu obiekt.onzdarzenie, a mianowicie pozwalają na przypisanie kilku rodzajów zdarzeń, np. 'click', 'moseover' itp., natomiast przy zapisach jakie Ty stosujesz możesz stosować wyłącznie jedno zdarzenie dla danego obiektu DOM, gdyż każde kolejne przypisanie nadpisze poprzednie (wynika to z podstawowych zasad operatora przypisania w programowaniu, który nadpisuje poprzednie wartości nowymi).
drogimex
Tomek Sochacki

Posty: 6
Dołączył(a): 08.01.2017
Lokalizacja: Poznań

Re: Prosty skrypt JS

Post 08.01.2017, 14:16:09

drogimex napisał(a):Metody z pkt. 2 mają jedna, dużą przeagę nad przypisywaniem w stylu obiekt.onzdarzenie, a mianowicie pozwalają na przypisanie kilku rodzajów zdarzeń, np. 'click', 'moseover' itp., natomiast przy zapisach jakie Ty stosujesz możesz stosować wyłącznie jedno zdarzenie dla danego obiektu DOM, gdyż każde kolejne przypisanie nadpisze poprzednie (wynika to z podstawowych zasad operatora przypisania w programowaniu, który nadpisuje poprzednie wartości nowymi).

moim zdaniem źle sformułowałeś zdanie. Za pomocą oncośtam można bez problemu do jednego elementu przypisać zarówno onclick i onmouseover. Nie da się za to przypisać (bez kombinowania) dwóch funkcji wywoływanych przy tym samym zdarzeniu (np. dwóch funkcji reagujących na kliknięcie), bo przypisując drugi raz do własności onclick pozbywasz się tego, co było przypisane wcześniej
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19533
Dołączył(a): 14.04.2002

Re: Prosty skrypt JS

Post 09.01.2017, 12:26:35

Nie trzeba było nawet tej referencji, wystarczyło zamienić:
Kod: Zaznacz cały
window.onclick = function(event)

na:
Kod: Zaznacz cały
dropdowns.onclick = function(event)


Nie wiem czy to praktyczne, ale na chromie działa dobrze. Dzięki za nakierowanie na rozwiązanie i małą lekturkę. Pozdrawiam :)
Dejwidson
Posty: 2
Dołączył(a): 05.01.2017


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935022 wiadomości
  • w 246325 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)