• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

porównywanie if parametrów addEventListener

+1 głos
94 wizyt
pytanie zadane 23 lutego w JavaScript przez kajman_Rrzeczny Użytkownik (970 p.)

zmienna która przechowuje element html'a, do tej zmiennej dodano "słuchacza" addEventListener, jego warunek czyli ("mousemove") i funkcja która ma się wykonać. Jak sprawdzić za pomocą if'a czy ta zmienna ma addEventListener'a o tym warunku, jeżeli jest on inny niż mousemove ma się wykonać funkcja if'a. w moim przypadku jest to:

tamten element ma domyślnie display: none;

jeżeli najade na element to tamten element ma się wyświetlić (display: block;) jeżeli zjade kursorem z elementu to tamten element ma się shować. 

let button = document.getElementById("showDivVidmo");

button.addEventListener("mousemove", function() {
    let divVidmo = document.getElementById("divVidmo");
    divVidmo.style.display="block";

    if (button === ???) {
        divVidmo.style.display="none";
    }
});

nie wiem jak ma wyglądac składnia w miejscu if (button === ???), zamiast ??? co mam wstawić.

PS: nie wiedziałem jaki dać tytuł pytania

1
komentarz 23 lutego przez ScriptyChris Mędrzec (168,340 p.)

Jeśli przycisk o id showDivVidmo jest przodkiem lub poprzedzającym rodzeństwem elementu divVidmo, to można to obsłużyć w CSS przez pseudo-klasę :hover.

komentarz 24 lutego przez VBService VIP (136,750 p.)

@kajman_Rrzeczny, zobacz jak używać  smiley

const i let w javascript (ES6) – kiedy ich używać?

2 odpowiedzi

+3 głosów
odpowiedź 23 lutego przez sc4rface Dyskutant (7,650 p.)
edycja 23 lutego przez sc4rface
 
Najlepsza

Jeżeli dobrze zrozumiałem, chcesz, aby po najechaniu myszką na element A - pojawił się element B, a po wyjechaniu myszką poza element A, element B zniknął.

Swoją drogą - nie porównujemy zdarzeń, nie tędy droga. Najpewniej wybrałeś nieodpowiednie z nich do zrealizowania tego, co siedzi w Twojej głowie. Wg. mnie powinieneś wykorzystać mouseover oraz mouseout. Poniżej przykład napisany na kolanie, aby przedstawić o co chodzi.

const trigger = document.getElementById('trigger');
const hiddenElement = document.querySelector('.hiddenElement');
			
trigger.addEventListener('mouseover', function() {
   hiddenElement.classList.add('hiddenElement--visible');
});
			
trigger.addEventListener('mouseout', function() {
   if(hiddenElement.classList.contains('hiddenElement--visible')) {
      hiddenElement.classList.remove('hiddenElement--visible');
   }
});

 

0 głosów
odpowiedź 24 lutego przez VBService VIP (136,750 p.)

Propozycja. (html i css tylko dla celów pokazowych)  smiley                     

<button>show vidmo</button>
<div id="div-vidmo" class="hide"></div>
* {
  box-sizing: border-box;
}
button {
  background-color: rgba(230,230,230,0.8); 
  border: 0;
  font: 2em/2.1em monospace;
  width: 40vw;
  text-align: center;
}
div#div-vidmo {
  margin-top: 1em;
  width: 40vw;
  height: 200px;
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}
.hide {
  display: none;
}
const    button = document.querySelector('button');
const div_vidmo = document.querySelector('#div-vidmo');

['mouseover', 'mouseout'].forEach(event => {
  button.addEventListener(event, () => {
    div_vidmo.classList.toggle('hide');
  })  
});

 

Podobne pytania

0 głosów
1 odpowiedź 63 wizyt
pytanie zadane 2 października 2019 w JavaScript przez Allen Obywatel (1,010 p.)
0 głosów
1 odpowiedź 87 wizyt
pytanie zadane 11 listopada 2019 w JavaScript przez BlvckFox Gaduła (4,240 p.)
0 głosów
1 odpowiedź 70 wizyt
pytanie zadane 23 kwietnia 2019 w JavaScript przez gucisz Nowicjusz (160 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

85,727 zapytań

134,512 odpowiedzi

298,568 komentarzy

56,635 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...