js获取鼠标点击事件的相对位置_框架

<html>

<head>

function m(){

documentgetElementById("area")innerHTML=eventclientX +" , "+eventclientY;

}

function c(){

var objTop = getOffsetTop(documentgetElementById("d"));//对象x位置

var objLeft = getOffsetLeft(documentgetElementById("d"));//对象y位置

var mouseX = eventclientX+documentbodyscrollLeft;//鼠标x位置

var mouseY = eventclientY+documentbodyscrollTop;//鼠标y位置

//计算点击的相对位置

var objX = mouseX-objLeft;

var objY = mouseY-objTop;

clickObjPosition = objX + "," + objY;

alert(clickObjPosition);

}

function getOffsetTop(obj){

var tmp = objoffsetTop;

var val = objoffsetParent;

while(val != null){

tmp += valoffsetTop;

val = valoffsetParent;

}

return tmp;

}

function getOffsetLeft(obj){

var tmp = objoffsetLeft;

var val = objoffsetParent;

while(val != null){

tmp += valoffsetLeft;

val = valoffsetParent;

}

return tmp;

}

</script>

</head>

<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自己研究下，不难

有两种方法

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

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

var mouseX;

var mouseY;

function showName() {

var infoDiv = documentgetElementById('infoDiv');

infoDivinnerHTML = 'This is the name!';

infoDivstyleleft = mouseX;

infoDivstyletop = mouseY;

infoDivstyledisplay = "block";

}

function mouseOver(obj) {

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

mouseX = eventclientX;

mouseY = eventclientY;

}

</script>

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

附上代码：

<!DOCTYPE html>

<html>

<head>

function mousePosition(evt){

evt = evt || windowevent;

var xPos = evtpageX || evtclientX || evtoffsetX || evtx;

var yPos = evtpageY || evtclientY || evtoffsetY || evty;

return [xPos, yPos];

}

function moveWindow (e) {

documentonmousemove = function(e){

resultinnerHTML = mousePosition(e);

};

}

onload = moveWindow;

</script>

</head>

<body>

</div>

</body>

</html>

以上就是关于js获取鼠标点击事件的相对位置全部的内容，包括:js获取鼠标点击事件的相对位置、求JS获得当前鼠标的位置坐标的方法、如何在javascript中获取鼠标的位置坐标，然后再在body里面做一个文本框获取等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9726975.html

js获取鼠标点击事件的相对位置

发表评论

评论列表（0条）