Jak zareagować na kliknięcie elementów pod spodem?

1

Prosta sprawa, ale trudno znaleźć, jak to zrobić.

Otóż jest taki kod HTML+JS:

<!doctype html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
    </head>
    <body>
        Before divs
        <div id="divred" onclick="clickRed()" style="background-color:#FF0000">
            Red div, before green div
            <div id="divgreen" onclick="clickGreen()" style="background-color:#00FF00">
                Green div, before blue fiv
                <div id="divblue" onclick="clickBlue()" style="background-color:#0000FF">
                    Blue div
                </div>
                Green div, after blue div
            </div>
            Red div, after green div
        </div>
        After divs

        <script type='text/javascript'>
            function clickRed()
            {
                alert("Red");
            }
            function clickGreen()
            {
                alert("Green");
            }
            function clickBlue()
            {
                alert("Blue");
            }
        </script>
    </body>
</html>

Problem jest taki, że jak się kliknie jakiś element, to reaguje nie tylko on sam, ale reagują także wszystkie elementy pod spodem. W tym przypadku, kliknięcie na obszarze divblue uruchamia wszystkie trzy funkcje.

Co zrobić, żeby na kliknięcia reagował tylko widoczny element, a nie wszystkie będące w miejscu kliknięcia? Gdzieś widziałem przypadkiem przykład takiego kodu, co jest dowodem na to, że to jest możliwe, ale jak teraz próbuję wyszukać z pomocą Google, to nie znajduję.

Nie akceptuję odpowiedzi polegającej na zmianie rozmieszczenia elementów celem eliminacji położenia jednego elementu na tle drugiego, co ma miejsce w tym przypadku.

2

W javascript masz propagowanie do góry i w dół eventu, więc musisz po prostu zrobić preventDefault, żeby dalej go nie propagować.

function clickGreen(e)
{
    e.preventDefault();
    alert("Green");
}

I przy addEventListener możesz wybrać opcję propagacji eventu.

1
Autysta napisał(a):

W javascript masz propagowanie do góry i w dół eventu, więc musisz po prostu zrobić preventDefault, żeby dalej go nie propagować.

function clickGreen(e)
{
    e.preventDefault();
    alert("Green");
}

Pomyliłeś metody, powinno być stopPropagation (https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation).

preventDefault blokuje jedynie natywne zachowanie eventu.

0
Xarviel napisał(a):
Autysta napisał(a):

W javascript masz propagowanie do góry i w dół eventu, więc musisz po prostu zrobić preventDefault, żeby dalej go nie propagować.

function clickGreen(e)
{
    e.preventDefault();
    alert("Green");
}

Pomyliłeś metody, powinno być stopPropagation (https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation).

preventDefault blokuje jedynie natywne zachowanie eventu.

O to mi chodziło, tego właśnie szukałem, ale to działa pod warunkiem, że zastosuję addEventListener zamiast atrybutu onclick w tagu HTML.

<!doctype html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
    </head>
    <body>
        Before divs
        <div id="divred" style="background-color:#FF0000">
            Red div, before green div
            <div id="divgreen" style="background-color:#00FF00">
                Green div, before blue fiv
                <div id="divblue" style="background-color:#0000FF">
                    Blue div
                </div>
                Green div, after blue div
            </div>
            Red div, after green div
        </div>
        After divs

        <script type='text/javascript'>
            document.getElementById("divred").addEventListener("click", (evt) => clickRed(evt));
            document.getElementById("divgreen").addEventListener("click", (evt) => clickGreen(evt));
            document.getElementById("divblue").addEventListener("click", (evt) => clickBlue(evt));
        
            function clickRed(evt)
            {
                evt.stopPropagation();
                alert("Red");
            }
            function clickGreen(evt)
            {
                evt.stopPropagation();
                alert("Green");
            }
            function clickBlue(evt)
            {
                evt.stopPropagation();
                alert("Blue");
            }
        </script>
    </body>
</html>

Chciałbym zrobić coś w tym stylu:
<div id="divred" onclick="clickRed(123)" style="background-color:#FF0000">
Wtedy, jako pierwszy i jedyny argument wchodzi hardkodowana liczba. Jak w ten sposób wprowadzić do funkcji obiekt "event"?

1

Jeśli chcesz inline to dostępna jest zmienna event i wtedy musisz przekazać ją jako pierwszy parametr

<div id="divred" onclick="clickRed(event, 123)" style="background-color:#FF0000">
  ...
</div>

EDIT:

Pewnie o tym wiesz, ale z reguły klikalne powinny być elementy dostępne za pomocą klawiatury takie jak przycisk / link / pole tekstowe.

0

Pewnie o tym wiesz, ale z reguły klikalne powinny być elementy dostępne za pomocą klawiatury takie jak przycisk / link / pole tekstowe.

To prawda i o tym wiem. Nie ma reguły, zależy czemu to ma służyć, ale po coś wymyślono <input>. Z drugiej strony, mam wrażenie, że tradycyjne przyciski i pola robione za pomocą <input> o standardowym wyglądzie spotyka się coraz rzadziej.

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