js 获取点击位置坐标值实例
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给各位朋友详细介绍关于js 获取点击位置坐标值实例,各位有需要了解的朋友不防进入参考。...
|
JQUERY获取鼠标的坐标
| 代码如下 |
复制代码 |
|
//获取鼠标坐标
$(function() {
$("#Button2").click(function(event) {
alert(event.pageX);
alert(event.pageY);
});
});
<input id="Button2" type="button" value="button" />
|
js方法
鼠标在点击时获取点击的位置，附javascript源码，如果是鼠标当前位置，只需要把onmousedown改成onmousemove鼠标移动即可
| 代码如下 |
复制代码 |
|
function mousePosition(ev){ if(ev.pageX || ev.pageY){ return
{x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX +
document.body.scrollLeft - document.body.clientLeft, y:ev.clientY +
document.body.scrollTop - document.body.clientTop }; } function
mouseMove(ev){ ev = ev || window.event; var mousePos =
mousePosition(ev); document.getElementById('div1').value = mousePos.x;
document.getElementById('div2').value = mousePos.y; }
document.onmousedown = mouseMove;
|
在html中加入
x轴坐标是: y轴坐标是:
然后你点击你的鼠标就能显示它的位置坐标了
实例
| 代码如下 |
复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示单击的坐标</title>
<style>
pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;}
span{color:#999;}
</style>
<script type="text/javascript">
document.onclick = function (event)
{
var event = event || window.event;
alert("坐标：[" + event.clientX + ", " + event.clientY + "]")
}
</script>
</head>
<body>
</body>
</html>
|
|
