addEventListener wywołuje inne funkcje

pytanie zadane 5 września 2017 w JavaScript przez Midgard Początkujący (390 p.)

Mam pewien problem związany z nasłuchem. Otóż chciałem nasłuchiwać kliknięcia na dwa różne elementy div i w zależności od tego, który zostanie kliknięty wywoływać pewne funkcje. Jedna z nich służy do pokazania diva style.display = "block", druga natomiast do jego ukrycia (analogiczne none). Otwieranie faktycznie działa, niestety zamknięcie już nie. Kombinowałem troszkę z kodem i wartościami startowymi i okazuje się, że zamknięcie również działa, ale tylko w momencie, w którym nie istnieje funkcja otwierająca. Z testów wynika, że przy dwóch funkcjach wywołują się one obie, stąd style.display pozostaje ciągle jako block.


<!DOCTYPE HTML>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>

    <div id="image1" ><img src="arrow.png"/>
    <div id="modal">
        <div id="modal_view">
            tutututu
            <div id="close_sign">x</div>
            </div>
        </div>
    </div>
    
<script type="text/javascript" >
    
    var O2 = document.getElementById("image1");
    O2.addEventListener('click',OpenModal);
    
    var C1 = document.getElementById("close_sign");
    C1.addEventListener('click',CloseModal);
    
    
    function CloseModal(){
    document.getElementById("modal").style.display = "none";
}

function OpenModal(){
    document.getElementById("modal").style.display = "block";
}

    

    
    </script>
</body>
</html>

komentarz 5 września 2017 przez Midgard Początkujący (390 p.)

Mam pewien problem związany z nasłuchem. Otóż chciałem nasłuchiwać kliknięcia na dwa różne elementy div i w zależności od tego, który zostanie kliknięty wywoływać pewne funkcje. Jedna z nich służy do pokazania diva style.display = "block", druga natomiast do jego ukrycia (analogiczne none). Otwieranie faktycznie działa, niestety zamknięcie już nie. Kombinowałem troszkę z kodem i wartościami startowymi i okazuje się, że zamknięcie również działa, ale tylko w momencie, w którym nie istnieje funkcja otwierająca. Z testów wynika, że przy dwóch funkcjach wywołują się one obie, stąd style.display pozostaje ciągle jako block.

2 odpowiedzi

odpowiedź 5 września 2017 przez jankowa1ski Gaduła (3,560 p.)

Wydaje mi się że powodem jest to że twoj div clodemodal jest wewnatrz divu image1 to powoduje ze jak klikniesz w clodeModal to ten event klikniecia idzie jakby w góre i aktywuje tez listener image1. Event zachuwuje sie jak "babelek" czyli idzie w góre tu masz opis tego:

http://kursjs.pl/kurs/mouse.php#babelki