JS获取鼠标点击位置坐标_框架

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

<title>Js获取适时获取鼠标坐标值并显示</title>

var getCoordInDocumentExample = function(){

var coords = documentgetElementById("coords");

coordsonmousemove = function(e){

var pointer = getCoordInDocument(e);

var coord = documentgetElementById("coord");

coordinnerHTML = "X,Y=("+pointerx+", "+pointery+")";

}

var getCoordInDocument = function(e) {

e = e || windowevent;

var x = epageX || (eclientX +

(documentdocumentElementscrollLeft

|| documentbodyscrollLeft));

var y= epageY || (eclientY +

(documentdocumentElementscrollTop

|| documentbodyscrollTop));

return {'x':x,'y':y};

}

windowonload = function(){

getCoordInDocumentExample();

};

</script>

请在此移动鼠标。

</div>

<br />

你说的那一般是js实现的，那就相对复杂多了，其中涉及到事件也很多。具体问题还是要具体看，现在很多在非ie下的代码不少都是用html5+css3完成的，因为只有ie对html5支持最差。

获取鼠标当前位置只需：pageX、pageY即可。

具体步骤如下：

1、新建一个html代码页面，在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。

创建<div>的代码：<div id="point-loc"></div>

2、使用pageX、pageY获取鼠标当前位置。在<title>标签后面新建一个<script>，创建鼠标移动时获取鼠标当前的位置。

js代码：<script type="text/javascript">

documentonmousemove = function(e){

var loc = "当前位置 x:"+epageX+",y:"+epageY

documentgetElementById("point-loc")innerHTML = loc;

}

</script>

3、保存html后使用浏览器打开即可得到鼠标位置

使用以上方法即可获取鼠标位置哦。

function m(){

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

}

</script>

有两种方法

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>

以上就是关于JS获取鼠标点击位置坐标全部的内容，包括:JS获取鼠标点击位置坐标、html中js捕获浏览器窗口外的鼠标位置、怎样获取当前鼠标位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

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

原文地址: https://outofmemory.cn/web/9640238.html

JS获取鼠标点击位置坐标

发表评论

评论列表（0条）