JavaScript总结(六)--clientX和offsetX

作者: 风的低语 | 来源:发表于2018-06-20 14:44 被阅读7次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .show{
                width: 600px;
                height: 600px;
                border: 1px solid red;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $(".show").mousemove(function(){
                    var clintX = event.clientX;//获取的是相对body的坐标
                    var clintY = event.clientY;
//                  console.log(clintX,clintY);
                    var offsetX = event.offsetX;//获取的是相对当前div的坐标
                    var offsetY = event.offsetY;
                    console.log(offsetX,offsetY);
                });
            })
        </script>
    </head>
    <body>
        <div class="show">
            
        </div>
    </body>
</html>