js如何获取鼠标指针在元素中的坐标？

JavaScript013

js如何获取鼠标指针在元素中的坐标？,第1张

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>获取鼠标在Canvas中的坐标位置</title>

<style>

#canvas{

border:1px solid #ccc

width:300px

height:300px

overflow:hidden

}

</style>

<script>

function get_canvas(ev,obj){

m_clientX = ev.clientX-obj.offsetLeft

m_clientY = ev.clientY-obj.offsetTop

document.getElementById("tips").innerHTML = "当前坐标：X："+ m_clientX + " ,Y：" +m_clientY

}

</script>

</head>

<body>

<div id="tips"></div>

<div id="canvas" onmousemove="get_canvas(event,this)"></div>

</body>

</html>

兼容IE8+

用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同。

参考资料

首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解.脚本之家[引用时间2018-1-18]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>

<ul>

    <li>1234</li>

    <li>12345</li>

    <li>123456</li>

    <li>1234567</li>

</ul>

<script>

    $('ul').on('click','li',function (e) {

         console.log(e.clientX)

         console.log(e.clientY)

    })

</script>

</body>

</html>

你好，JS没有直接获取元素相对于页面的绝对坐标的方法。但是我们可以通过相关值的计算而得到。首先我们假设input元素ID为"J_MyInput"，然后看下面代码注释：

var input = document.getElementById('J_MyInput') // 根据ID取得元素对象

var sizeObj = input.getBoundingClientRect() // 取得元素距离窗口的绝对位置

// 窗口的滚动偏移（垂直、水平）

var bodyOffset = {top: document.body.scrollTop, left: document.body.scrollLeft}

// 元素相对于页面的绝对位置 = 窗口滚动偏移 + 元素相对于窗口的绝对位置

var inputOffsetTop = sizeObj.top + bodyOffset.top // 距顶部

var inputOffsetLeft = sizeObj.left + bodyOffset.left // 距左侧

希望能解决你的问题，有疑问可追问，望采纳~