JS获取鼠标点击位置坐标

JavaScript025

JS获取鼠标点击位置坐标,第1张

是指Script生成的iframe吧？理论上，iframe内的页面和parent页只有上下级关系，所以鼠标在iframe内的坐标应该不能在父页获取。你可以用document.getElementById("iframe1").contentDocument得到iframe的document对象，之后操作它得到iframe内的坐标，再与父页中iframe标签左上角坐标叠加就可以。

有两种方法

1. 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会弹出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明".

2.上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:

<script>

var mouseX

var mouseY

function showName() {

var infoDiv = document.getElementById('infoDiv')

infoDiv.innerHTML = 'This is the name!'

infoDiv.style.left = mouseX

infoDiv.style.top = mouseY

infoDiv.style.display = "block"

}

function mouseOver(obj) {

// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.

mouseX = event.clientX

mouseY = event.clientY

}

</script>

<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name.</div>

<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->

<div id="infoDiv" style="display: noneposition: absolutewidth: 100pxheight: 50pxbackground-color: #F1F19B"></div>

代码如下：

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