html Dodawanie zdarzenia事件做div

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Dodawanie zdarzenia事件做div相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于html Dodawanie zdarzenia事件做div的主要内容，如果未能解决你的问题，请参考以下文章

java Tworzenie库存我dodawanie做niego项目

sql Dodawanie nowego parametru do bazy

JS异步那些事 四（HTML 5 Web Workers）

CSS和HTML的一些事

缓存性能HTML5缓存的那些事

关于编码的一些事..