Łączenie zdarzeń - react, javascript, onMouseDown & onMouseEnter

0

Cześć,

Mam taki problem: potrzebuję "powiązać" ze sobą zdarzenia. Tj. Mamy np. 16 divów ułożonych w szachownicę, chciałbym wywołać jakieś zdarzenie na wybranych divach w następujący sposób:

  1. Najeżdżamy na dowolnego diva myszką
  2. Robimy mouse down, event się uruchamia
  3. Najeżdżamy myszką na kolejne wybrane divy i na każdym z nich po mouse enter event się uruchamia. UWAGA: event mouse enter uruchamia się tylko, gdy jest wciśnięty przycisk myszki
  4. Puszczamy przycisk myszki - event nie może się już wykonać, dopóki ponownie nie zrobimy mouse down, nie wciśniemy przycisku.

Podejrzewam, że brakuje mi odpowiedniego słownictwa, bo niestety nie udało mi się znaleźć w googlach, jak nazywa się tego typu łączenie zdarzeń. Podpowie ktoś? Czy to w ogóle jest wykonalne poprzez same event listenery? Tak na logikę to chyba musi być wykonalne właśnie przez event listenery :D.

2

Oczywiście masz na myśli: mouseover.
Użyj zmiennej globalnej przełączanej przez mousedown mouseup. I wtedy zależnie od jej stanu różnie reaguj na mouseover.

0

Dlaczego mouse over, a nie enter? Jest to aż tak istotne w tym wypadku? Różnica dotyczy tylko dzieci, a tu ich nie ma, więc bez różnicy, tak :)?

I dzięki, rano powalczę z ze zmienną globalną :)

2

ustawiasz flagę po prostu (jakąś zmienną) w czasie mouseDown np. isDown = true, potem sprawdzasz mouseMove czy flaga jest ustawiona, a w mouseUp wyłączasz flagę.

2

@Freja Draco, @LukeJL - sam chciałem też napisać coś ze zmienną pomocniczą/flagą, która będzie ustawiana w chwili kliknięcia, a następnie, przy wchodzeniu kursorem na dane elementy, nastąpi sprawdzenie stanu tej flagi. Ale dałem sobie spokój, bo uznałem, że to prowizorka, zaraz zostanę zjechany, że tak się nie robi, że powinno się jakieś hooki ustawiać itp :D

Widać czasami warto zaufać swojej intuicji/pierwszej myśli ;)

1
Freja Draco napisał(a):

Oczywiście masz na myśli: mouseover.
Użyj zmiennej globalnej przełączanej przez mousedown mouseup. I wtedy zależnie od jej stanu różnie reaguj na mouseover.

Gdy ostatnio coś takiego robiłem, to zrobiłem to w podobny sposób. Niestety nie znalazłem jeszcze biblioteki JS, która pozwalałby takie rzeczy szybko i łatwo ogarnąć. Kod trzeba pisać samemu i niestety liczyć się z różnicami pomiędzy przeglądarkami np. w niektórych przeglądarkach kolejność wywoływania zdarzeń myszy jest inna i trzeba obsłużyć takie przypadki jeżeli kod ma działać na różnych przeglądarkach.

0

Mogę jeszcze prosić o przykład, jak się deklaruje taką zmienną globalną z eventem zależnym od mouseDown?

Domyślam się, że należy to zrobić w komponencie funkcyjnym, ale coś nie wychodzi powiązanie tego.

0

zmienna_globalna = 123;

Bez żadnych var / let przed.

0

Niee, wtedy woła, że jest niezdefiniowana zmienna.

Bardziej chodzi mi o przykład, jak poza JSX stworzyć funkcję, listenera, który będzie w tej zmiennej globalnej zapisywal stan, czy przycisk jest kliknięty, czy nie.

0

Nie znam Reacta i nie kumam problemu, ale w JS wygląda to tak:
https://www.w3schools.com/jsref/event_onmousedown.asp

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0