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.