原生js获取鼠标事件发生时，鼠标所在位置的各种坐标

bohn

于 2019-07-13 09:31:34 发布

阅读量4.8k

点赞数

分类专栏： js 文章标签： js 鼠标事件坐标

本文链接：https://blog.youkuaiyun.com/qq_39458856/article/details/95724745

版权

本文详细介绍了如何利用原生JavaScript处理鼠标事件，获取鼠标的屏幕坐标、页面坐标、元素相对坐标等信息，对于JavaScript开发者在实现交互功能时非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <meta charset="UTF-8">

</head>
<!--//获取鼠标点击事件发生时的鼠标指针相对于浏览器窗口的坐标-->
<!--<body onmousedown="show_coords(event)">-->

<!--<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>-->
<!--<script type="text/javascript">-->
<!--    function show_coords(event)-->
<!--    {-->
<!--        console.log(event)-->
<!--        x=event.clientX-->
<!--        y=event.clientY-->
<!--        alert("X 坐标: " + x + ", Y 坐标: " + y)-->
<!--    }-->
<!--</script>-->
<!--</body>-->
<!--//获取鼠标移动事件中，鼠标位于页面本身的水平和垂直坐标-->
<!--<body onmousemove="show(event)">-->
<!--    <script>-->
<!--        function show(event) {-->
<!--            console.log(event);-->
<!--            console.log(`X坐标:${eve