JS获取鼠标点击位置坐标

JavaScript013

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

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

<html>

<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:90pxborder:1px solid #cccfont-size:36pxwidth:800pxheight:800px"></div>

<div id="area"></div>

<div style="width:1400pxheight:300pxborder:1px solid redpadding-left:1200px">

<div id="d" style="width:200pxheight:200pxborder:1px solid greenpadding:10pxcursor:hand" onclick="c()">这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div>

</div>

</body>

</html>

现写的，你可以copy下来创建个html自己研究下，不难

function fn1(obj){

    var $li = $(obj).parent()

    var spclass = $li.data("spclass")

}