如何获取鼠标在div中的相对位置

  如何获取鼠标在div中的相对位置,其实是很简单,下有个不错的示例,感兴趣的朋友可以参考下

 代码如下:
<HEAD> 
<TITLE> JS获取DIV相对坐标</TITLE> 
<script type="text/javascript"><!-- 
function getX(obj){ 
var parObj=obj; 
var left=obj.offsetLeft; 
while(parObj=parObj.offsetParent){ 
left+=parObj.offsetLeft; 

return left; 

 
function getY(obj){ 
var parObj=obj; 
var top=obj.offsetTop; 
while(parObj = parObj.offsetParent){ 
top+=parObj.offsetTop; 

return top; 

 
function DisplayCoord(event){ 
var top,left,oDiv; 
oDiv=document.getElementById("demo"); 
top=getY(oDiv); 
left=getX(oDiv); 
document.getElementById("mp_x").innerHTML = (event.clientX-left+document.documentElement.scrollLeft) -2+"px"; 
document.getElementById("mp_y").innerHTML = (event.clientY-top+document.documentElement.scrollTop) -2+"px"; 

// --></script> 
</HEAD> 
 
<BODY style="margin:40px;" mce_style="margin:40px;"> 
<div style="background-color:#000000;color:#0011FF;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)"> 
我是DIV,经测试,有2PX的误差... 
</div> 
当前鼠标坐标为: 
X:<span id="mp_x"></span> 
Y:<span id="mp_y"></span> 
</body> 
</BODY> 
 
</HTML> 
 
 
如果不对,可以试试将 
 
document.documentElement.scrollLeft 
 
替换成 
 
document.body.scrollLeft 
 

时间: 2024-09-26 05:55:39

如何获取鼠标在div中的相对位置的相关文章

获取鼠标在div中的相对位置的实现代码_javascript技巧

复制代码 代码如下: <HEAD> <TITLE> JS获取DIV相对坐标</TITLE> <script type="text/javascript"><!-- function getX(obj){ var parObj=obj; var left=obj.offsetLeft; while(parObj=parObj.offsetParent){ left+=parObj.offsetLeft; } return left;

web前端-使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题

问题描述 使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题 项目需要对html内文章内容做颜色标记的功能,但是不能改写原html的内容. 现在想到的方案是鼠标划取文章内容的时候,使用js获取文章内容的起始位置和结束位置,存入数据库,下次再访问该文章的时候,使用数据库记录的起始位置和结束位置去刻画标记. 测试前端代码如下 <!DOCTYPE html> <html> <head> <script type="

JS在可编辑的div中的光标位置插入内容的方法

 首先要让DIV启用编辑模式 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置.   2个步骤: ① 获取DIV中的光标位置 ② 改变光标位置 代码如下: var cursor = 0; // 光标位置  document.onselectionchange

JS在可编辑的div中的光标位置插入内容的方法_javascript技巧

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

js获取元素在浏览器中的绝对位置_javascript技巧

JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值.那么如何得到一个HTML元素的绝对位置呢,可以用以下函数: 复制代码 代码如下: //获取元素的纵坐标 function getTop(e){ var o

JTable中获取鼠标所在位置的行数

table=new JTable(cells,columnNames); table.addMouseListener(new java.awt.event.MouseAdapter() { public void mouseClicked(java.awt.event.MouseEvent e) { System.out.println("mouseClicked()"); // TODO Auto-generated // Event stub // mouseClicked()

JS获取鼠标相对位置的方法_javascript技巧

本文实例讲述了JS获取鼠标相对位置的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>位置</title> <script language="javascript" type="text/javascript"&

javascript-请问,如何用JavaScript获取div中插入符光标的像素位置?

问题描述 请问,如何用JavaScript获取div中插入符光标的像素位置? 如题,div是可编辑的,width和height可变,输入的字符不限格式,并且可输入的字符数量庞大. ps:热心的亲们,文本框和input的获取方式对于div来说不太适用,╮(╯▽╰)╭ pps:不是鼠标位置,不是div元素的位置,是当焦点在div时,div里面一闪一闪的那个插入符光标的像素位置,有x,y的那种,或者 {left = p.left + "px"; top = p.top +"px&q

JavaScript中获取鼠标位置相关属性总结_javascript技巧

javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象. 我们通过监听document的mousemove,就可以实时获得鼠标位置. 但是!!event中和鼠标相关的属性太多了,很让人头大!如下: event.layerX event.layerY event.clientX event.clientY event.pageX event.pageY event.offsetX event.offsetY event.screenX event.screenY event