daniel-plewinski
8/19/2017 - 7:53 PM

Dodawanie zdarzenia event do div

Dodawanie zdarzenia event do div

coordinates.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CodersLab</title>
        <link rel="stylesheet" href="style/style.css">
    </head>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            border-radius: 5px;
            border: black 2px solid;
            margin: 20px;
        }

        .big {
            width: 80%;
            height: 300px;
            margin: 20px 10%;
        }

    </style>

    <body>

        <div class="box big" id="box"></div>

        <p>Położenie myszki:</p>
        <p>Globalne: X: <span id="globalX"></span></p>
        <p>Globalne: Y: <span id="globalY"></span></p>

        <script>
            document.addEventListener("DOMContentLoaded", function() {

                // uchwyty do spanów
                var globalX = document.querySelector('#globalX');
                var globalY = document.querySelector('#globalY');

                // uchwyt do miejsca pobieranie koordynatów
                var div = document.querySelector('#box');

                // listener do uchwytu
                div.addEventListener('mousemove', function(e) {

                    // zapisujemy event do uchwytów spanów
                    globalX.innerHTML = e.clientX;
                    globalY.innerHTML = e.clientY;
                });
            });

        </script>

    </body>

</html>