`

js获得相对于父元素的坐标

 
阅读更多
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
// screenX 相对于屏幕
//clientX相对于浏览器  offsetX,offsetY(相对于父容器,IE专用)
x=event.clientX
y=event.clientY 
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>

  最后解决:

  

div.onmouseout=function(event){  
                        var div = document.getElementById("test");  
                    <span style="color:#FF6600;">var x=event.clientX;  
                        var y=event.clientY;  
                        var divx1 = div.offsetLeft;  
                        var divy1 = div.offsetTop;  
                        var divx2 = div.offsetLeft + div.offsetWidth;  
                        var divy2 = div.offsetTop + div.offsetHeight;  </span>  
                        if( x < divx1 || x > divx2 || y < divy1 || y > divy2){  
                                        //如果离开,则执行。。  
                                    }  

   来自:http://binbinwudi.iteye.com/blog/1915135

分享到:
评论

相关推荐

    Javascript中找到子元素在父元素内相对位置的代码

    总结以上分析,文档所提供的JavaScript代码段提供了一种计算子元素相对于父元素垂直位置的方法,并且可以与父元素的滚动功能相结合,以实现动态定位子元素的效果。代码的实现依赖于对DOM元素 `offsetTop` 和 `...

    js获取页面控件坐标.pdf

    在实际开发中,我们可能需要使用 JavaScript 库或框架来简化获取元素坐标的过程,例如 jQuery 库提供了一个 offset() 方法,可以直接获取元素相对于文档的坐标。 获取页面控件坐标是 JavaScript 编程中非常重要的一...

    js实现获取div坐标的方法

    函数返回一个对象,其中包含了六个属性,分别是:元素自身的宽度(`width`),元素自身的高度(`height`),元素相对于页面(或父元素)左边界的坐标(`x`或`left`),元素相对于页面(或父元素)上边界的坐标(`y`...

    javascript获得对象的坐标

    虽然 `getBoundingClientRect()` 是获取元素坐标的首选方法,但在某些情况下可能需要使用 `offsetTop` 和 `offsetLeft` 来获取元素相对于其最近的已定位祖先元素的位置。 ```javascript function getOffset...

    JS使用百分比确定图标坐标点击事件Demo

    在HTML中,我们可以使用`left`、`right`、`top`和`bottom`属性结合百分比来相对于父元素设置元素的位置。例如,`left: 50%`会使元素距离其父元素左边界的50%处。在JavaScript中,我们可以通过DOM操作获取到元素的...

    Javascript获取鼠标坐标的各种类型

    对于HTML控件的坐标,我们可以使用`offsetTop`和`offsetLeft`来获取一个元素相对于其最近的定位父元素(或`offsetParent`属性指定的父元素)的顶部和左侧距离。这些属性只读,不接受赋值。同时,`offsetWidth`和`...

    js实现网页上dom元素拖动 并实时显示坐标效果.rar

    在本资源"js实现网页上dom元素拖动 并实时显示坐标效果.rar"中,包含了多个关于DOM元素拖动的实例,帮助开发者了解并掌握这一技能。以下是关于这个主题的详细知识: 1. **DOM(Document Object Model)**:DOM是...

    jQuery 获得控件的坐标位置

    这两个方法用于获取或设置元素相对于其父容器的滚动位置。通常被用来操作具有滚动条的元素。 ##### 2.1 获取元素相对于滚动条的偏移量 ```javascript var pleft = $("selector").scrollLeft(); // 元素相对于滚动条...

    获取元素绝对位置 position

    首先,元素的绝对位置是指元素左上角相对于浏览器窗口的X和Y坐标。这不包括任何滚动偏移,它是元素在页面完全加载后,不考虑CSS相对定位或绝对定位时的位置。在JavaScript中,有两个主要的方法可以用来获取这些信息...

    jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

    这个方法只在元素的父元素已经通过CSS定位(即`position`属性被设置为`relative`、`absolute`或`fixed`)的情况下才有意义,因为它返回的坐标是相对于最近的已定位父元素的。如果父元素没有定位,`position()`返回的...

    vue 实现左右拖拽元素并且不超过他的父元素的宽度

    这是因为绝对定位的元素是相对于最近的已定位的祖先元素定位的,而在这里最近的已定位的祖先元素就是父元素。 文章还提到了一个问题,即这个拖拽功能是应用在音频播放组件中,使用两条线切割音频。这种拖拽操作的...

    jQuery获得指定元素坐标的方法

    相对定位是相对于最近的已定位的父元素进行偏移,而绝对定位则是相对于整个文档进行偏移。在本文中,我们主要讨论的是元素相对于文档的坐标,即绝对定位。 offset()方法是jQuery中用于获取元素位置信息的重要方法。...

    js获取触发事件元素在整个网页中的绝对坐标(示例代码)

    绝对坐标指的是一个元素左上角相对于浏览器窗口的X和Y坐标。这个坐标系统不考虑任何相对定位、滚动条或其他父元素的影响,它提供了一个元素在页面视口中的精确位置。 以下是一些用于获取元素绝对坐标的JavaScript...

    vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    在Vue.js开发中,有时我们需要获取元素的宽度、高度、相对于屏幕或父元素的位置等信息。这通常是通过JavaScript原生的DOM操作实现的,而Vue提供了`$refs`机制来方便地引用Vue实例中的DOM元素。本文将详细介绍如何在...

    javascript获取对象的绝对坐标

    在网页开发中,有时我们需要知道一个元素在其父级容器中的绝对位置,即该元素相对于页面左上角的坐标(X轴和Y轴的位置)。这对于实现某些动态效果或者交互功能非常重要。JavaScript 提供了多种方法来获取元素的位置...

    JavaScript获取对象在页面中位置坐标的方法

    这是因为页面的坐标系统是相对于`body`元素的。 函数内部首先获取`Obj`的高度`h`,然后初始化`sumTop`和`sumLeft`为0,它们将用于存储元素的总偏移量。接着进入`for`循环,每次迭代时,`sumTop`加上当前元素的`...

    js Event对象的5种坐标

    在IE中,可以使用x和y属性来达到类似效果,但需要注意的是,如果事件源的父元素设置了`position:relative`等定位属性,x和y可能会返回相对于该父元素的位置。 3. **offsetX 和 offsetY**: 这两个属性表示鼠标相...

    jquery中获得元素尺寸和坐标的方法整理

    此方法也返回一个包含top和left属性的对象,这两个属性表示元素相对于其父元素的位置坐标,单位为像素。例如: ```javascript var relativePosition = $('#element').position(); console.log(***, relativePosition...

    【JavaScript源代码】JavaScript offset实现鼠标坐标获取和窗口内模块拖动.docx

    在JavaScript中,`offset`属性系列是用来获取元素在页面或其定位父元素中的相对位置以及大小的重要工具。本文将深入探讨这些属性以及如何利用它们来实现鼠标坐标获取和窗口内模块的拖动功能。 首先,`offsetParent`...

Global site tag (gtag.js) - Google Analytics