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

Odpowiedz Nowy wątek
2019-07-14 21:30
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.

edytowany 1x, ostatnio: Kefir92, 2019-07-14 21:31

Pozostało 580 znaków

2019-07-14 22:46
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.


Pozostało 580 znaków

2019-07-14 22:52
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ą :)

A... to jakieś funkcje z Reacta, a to się nie wypowiadam. - Freja Draco 2019-07-14 23:37

Pozostało 580 znaków

2019-07-14 22:59
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ę.


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);

Pozostało 580 znaków

2019-07-14 23:07
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 ;)


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
1 mały if czy kolejna warstwa abstrakcji żeby ludzie z forum się nie śmiali? :D - WeiXiao 2019-07-14 23:08
wiesz... ciężko jest czasami znaleźć granicę/kompromis miedzy over engineering a prowizorką/tandetą. Zasada "ważne, że działa" nie zawsze jest optymalnym podejściem. - cerrato 2019-07-14 23:11
To czy jest optymalna wychodzi z czasem i dlatego pisze się MVP, aby zdobyć wiedzę nt. co będzie potrzebne. - WeiXiao 2019-07-14 23:13
zgadzam się, ale mi chodziło o coś innego. Czasami przy jakiejś głupocie/drobiazgu, nie ma sensu wyciągać "armat" pisać całej otoczki, tylko się zwyczajnie robi na sztukę (np. zamiast robienia kontrolerów, wrzucasz zmienną globalną, którą sobie w różnych miejscach sprawdzasz). Wiem, nie powinno się... i niech pierwszy rzuci kamieniem ten, kto tak nigdy nie robi ;) - cerrato 2019-07-14 23:17

Pozostało 580 znaków

2019-07-15 10:39
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.


Wiedza to potęga

Pozostało 580 znaków

2019-07-15 22:27
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.

Pozostało 580 znaków

2019-07-15 22:51
0

zmienna_globalna = 123;

Bez żadnych var / let przed.


Pozostało 580 znaków

2019-07-15 23:13
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.

Pozostało 580 znaków

2019-07-15 23:18
0

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


Pozostało 580 znaków

2019-07-15 23:22
0

W zwykłym JS to nie miałbym problemu :) tutaj potrzebuję to zrobić w Reacie. I wiązanie funkcji jest inne po prostu. Albo jestem jeszcze trochę głupi :)

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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