js获取鼠标点击事件的相对位置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取鼠标点击事件的相对位置相关的知识，希望对你有一定的参考价值。
如图
我需要获取图片上点击事件相对于图片左上方原点(0,0)的位置，最好要能考虑到滚动条的影响的，谢谢了~
<head>
<title>位置</title>
<script language="javascript" type="text/javascript">
function m()
document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;
function c()
var objTop = getOffsetTop(document.getElementById("d"));//对象x位置
var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置
var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
//计算点击的相对位置
var objX = mouseX-objLeft;
var objY = mouseY-objTop;
clickObjPosition = objX + "," + objY;
alert(clickObjPosition);
function getOffsetTop(obj)
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null)
tmp += val.offsetTop;
val = val.offsetParent;
return tmp;
function getOffsetLeft(obj)
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null)
tmp += val.offsetLeft;
val = val.offsetParent;
return tmp;
</script>
</head>
<body style="margin:0px;" onmousemove="m();">
<div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"> </div>
<div id="area"></div>
<div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;">
<div id="d" style="width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div>
</div>
</body>
</html>
现写的，你可以copy下来创建个html自己研究下，不难 参考技术A
常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的，而不考虑页面的滚动条所滚动的距离。
function pointerX(event)return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
function pointerY(event)
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
JS事件基础
JS事件基础
event对象和事件冒泡
什么是event对象
用来获取时间的详细信息：鼠标位置，键盘按键
例子：获取鼠标的位置：clientX鼠标点击横坐标；clientY鼠标点击纵坐标
document的本质：document.childNodes[0].tagName
? ——获取页面第一个子节点的值，是DOCTYPE。
事件流
事件冒泡
? 取消冒泡：oEvent.cancelBubble=true
? 例子：仿select控件
? DOM事件流
事件冒泡的含义：当事件发生后，这个事件就要开始传播，因为事件本身没有处理事件的能力，即处理时间的函数未绑定在该事件源上。
-
例子：仿select控件
window.onload=function(){
var oDiv=document.getElementById(‘div1‘);
var oBtn=document.getElementById(‘btn1‘);
//点击按钮出现下拉框
oBtn.onclick=function()
{
oDiv.style.display=‘block‘;
//alert(‘按钮被点击了‘);
//取消冒泡
event.cancelBubble=true;
}
//点击界面其他部位下拉框消失
document.onclick=function()
{
oDiv.style.display=‘none‘;
//alert(‘document被点击了‘)
}
}
鼠标事件
鼠标位置
可视区位置：clientX,clientY
例子1：跟随鼠标的Div
? 消除滚动条的影响
? 滚动条的意义——可视区与页面顶部的距离
document.onmousemove=function()
{
var oDiv=document.getElementById(‘div1‘);
var scrollTop=document.documentElement.scrollTop;
oDiv.style.left=event.clientX+‘px‘;
//加上scrollTop防止在拖动滚动条时，鼠标与div分开
oDiv.style.top=event.clientY+scrollTop+‘px‘;
};
注：但凡用到clientX和clientY时，一定要加上scrollLeft和scrollTop
获取鼠标在页面的绝对位置
封装函数
例子2：一串跟随鼠标的div
-
封装函数：获取鼠标在页面绝对位置
/*获取鼠标在页面绝对位置*/
function getPos()
{
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scrollLeft;
return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
}
-
例子2：一串跟随鼠标的div
function getPos()
{
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scrollLeft;
return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
}
document.onmousemove=function()
{
var aDiv=document.getElementsByTagName(‘div‘);
var pos=getPos();
for(var i=aDiv.length-1;i>0;i--)
{
//后面一个Div跟着前面一个Div走
aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘;
aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘;
}
//第一个Div跟着鼠标走
aDiv[0].style.left=pos.x+‘px‘;
aDiv[0].style.top=pos.y+‘px‘;
};
键盘事件
keyCode（返回按键值的ASCLL码，但FN键不反回值）
获取用户按下键盘的哪个按键
例子：键盘控制Div移动
document.onkeydown=function()
{
var oDiv=document.getElementById(‘div1‘);
if(event.keyCode==37)
{//左
oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
};
if(event.keyCode==38)
{//上
oDiv.style.top=oDiv.offsetTop-10+‘px‘;
};
if(event.keyCode==39)
{//右
oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
};
if(event.keyCode==40)
{//下
oDiv.style.top=oDiv.offsetTop+10+‘px‘;
};
};
其他属性
ctrlKey，shiftKey，altKey 作用（判断ctrl，shift，alt有没有按下）
-
例子：提交留言
回车 提交
ctrl+回车 提交
window.onload=function()
{
var oTxt1=document.getElementById(‘txt1‘);
var oBtn=document.getElementById(‘btn1‘);
var oTxt2=document.getElementById(‘txt2‘);
oBtn.onclick=function()
{
oTxt2.value+=oTxt1.value+‘
‘;
oTxt1.value=‘‘;
};
/*点击回车提交事件
因为点击回车时，焦点在text文本框中，所以keydown是在text文本框上发生*/
oTxt1.onkeydown=function()
{
//ctrl+回车 提交
if(event.keyCode==13 && event.ctrlKey)
{
oTxt2.value+=oTxt1.value+‘
‘;
oTxt1.value=‘‘;
}
//回车提交
if(event.keyCode==13)
{
oTxt2.value+=oTxt1.value+‘
‘;
oTxt1.value=‘‘;
}
};
};
以上是关于js获取鼠标点击事件的相对位置的主要内容，如果未能解决你的问题，请参考以下文章