好资源导航 » 文章资讯 » JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容

JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容

2024-02-20 11:10:05 188

获取鼠标坐标，并且根据鼠标所在div弹出不同内容：




鼠标的距离

varmouseX;
varmouseY;
functionshow(event){
varinfoDiv=document.getElementById('infoDiv');
mouseOver(event);
document.getElementById("a").innerHTML=mouseX+""+mouseY;
infoDiv.style.display="block";
//infoDiv.innerHTML=mouseX+""+mouseY;
infoDiv.style.left=mouseX+10+"px";
infoDiv.style.top=mouseY+10+"px";
}
functionhide(){
varinfoDiv=document.getElementById('infoDiv').style.display="none";;
}
functionmouseOver(obj){
e=obj||window.event;
//此处记录鼠标停留在组建上的时候的位置,可以自己通过加减常量来控制离鼠标的距离.
mouseX=e.layerX||e.offsetX;
mouseY=e.layerY||e.offsetY;
if(e.target.id=="aaa")
{
infoDiv.innerHTML="aaa";
}
elseif(e.target.id=="bbb")
{
infoDiv.innerHTML="bbb";
}
elseif(e.target.id=="ccc")
{
infoDiv.innerHTML="ccc";
}
elseif(e.target.id=="ddd")
{
infoDiv.innerHTML="ddd";
}else{
infoDiv.innerHTML="eee";
}
}



鼠标相对于触发事件元素的位置
aaa

bbb

ccc

ddd

以上所述是小编给大家介绍的JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
3162201930
czq8825@qq.com

JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容

热门推荐

随机推荐