JS事件对象clientX clientY鼠标移动的水平和垂直位置

最新推荐文章于 2023-09-26 16:31:10 发布

请问大家代码怎么敲

最新推荐文章于 2023-09-26 16:31:10 发布

阅读量235

点赞数

分类专栏： js javaScript

本文链接：https://blog.csdn.net/liumuye88888/article/details/115643839

版权

js 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的HTML和JavaScript示例展示了如何在网页上获取鼠标指针的坐标，并实时显示在页面上。文章核心内容包括onmousemove事件的使用、clientX和clientY属性获取鼠标坐标，以及在不同浏览器下的兼容性处理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #areaDIv{
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
        #showMsg{
            width: 300px;
            height: 100px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    
    <div id="areaDIv"></div>
    <br>
    <div id="showMsg"></div>
</body>
<script>
    window.onload = function () {
        var areaDIv = document.getElementById("areaDIv")
        var showMsg = document.getElementById("showMsg")
       /*onmousemove
            该事件将会在鼠标在元素中移动时被触发
            
            事件对象
                当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
                当事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标 键盘哪个键被按下 鼠标滚轮滚动的方向
            */
        areaDIv.onmousemove = function (event) {
            //在IE8中,响应函数被触发时,浏览器不会传递事件对象
            // 在IE8及一下的浏览器中,是将事件对象作为window对象的属性保存的
            /*
             var x = window.event.clientX
            var y = window.event.clientY
            */

            // 这种写法什么情况下都兼容
            // 写法1:
            // if(!event){
            //     event = window.event

            // }
            // 写法2:
            // event = event || window.event



            // clientX可以获取鼠标指针的水平坐标
            // clientY可以获取鼠标指针的垂直坐标
            var x = event.clientX
            var y = event.clientY
            showMsg.innerHTML = "x="+x+"y="+y

        }
       
    }
</script>
</html>