`
czwlucky
  • 浏览: 49791 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

JS之获取offsetX 的方法

 
阅读更多
// 该方法经过IE6 FF3.5的测试

function getOffsetX(evt){
    if( evt.offsetX ) return evt.offsetX;

    var ele = evt.target || evt.srcElement;
    var o = ele;

    var x=0;
    while( o.offsetParent )
    {
            x += o.offsetLeft;
            o=o.offsetParent;       
    }
     // 处理当元素处于滚动之后的情况
    var left = 0;
    while( ele.parentNode )
    {
            left += ele.scrollLeft;
            ele=ele.parentNode;       
    }

    return evt.pageX + left - x;
}
 
分享到:
评论

相关推荐

    javascript offsetX与layerX区别.docx

    ### JavaScript中的offsetX与layerX的区别 #### 一、引言 在JavaScript中,处理鼠标事件时经常会遇到`offsetX`和`layerX`这两个属性。它们都是用来获取鼠标相对于触发事件元素的位置,但具体使用时又有所差异。本文...

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

    JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...

    Javascript元素位置、大小、鼠标定位操作

    在 Javascript 中,可以使用多种方法来获取鼠标的位置信息。例如: 1. 使用 clientX、clientY 等属性来获取鼠标相对于窗口的横、纵坐标。 2. 使用 screenX、screenY 等属性来获取鼠标在屏幕上的横、纵坐标。 3. ...

    vue2.0获取鼠标位置的方法

    总结一下,Vue 2.0获取鼠标位置的关键在于利用Vue的事件监听器`@mousemove`和数据绑定机制,结合`event`对象的`offsetX`和`offsetY`属性,实现实时更新鼠标在元素内的坐标。这种方法可以轻松地应用到各种需要响应...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    2、原生JavaScript获取域名主机 3、原生JavaScript清除空格 4、原生JavaScript替换全部 5、原生JavaScript转义html标签 6、原生JavaScript还原html标签 7、原生JavaScript时间日期格式转换 8、原生JavaScript判断...

    【JavaScript源代码】教你javascript如何获取指针的位置.docx

    在JavaScript中,获取鼠标指针的位置是Web开发中常见的需求,尤其在实现交互式功能时。这个过程涉及到几个关键的事件属性以及浏览器兼容性处理。本文将详细解释如何使用JavaScript来获取鼠标的页面位置和相对元素的...

    JS获取各种高度宽度1

    本文将深入探讨如何使用JavaScript获取各种高度和宽度,包括浏览器窗口滚动条的位置、元素的几何尺寸等关键概念。 首先,我们来看一下与鼠标位置相关的几个属性: 1. `pageX`:表示鼠标在页面上的位置,从页面左上...

    JS获取浏览器的高度和宽度

    以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 首先,我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度,包括工具栏和其他用户界面...

    JS中坐标表示方法的异同

    ### JS中坐标表示方法的异同 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。对于前端开发者来说,理解鼠标事件中的坐标系统至关重要,因为这直接影响到用户交互的设计与实现。...

    js 获取浏览器高度和宽度值(多浏览器)

    浏览器高度和宽度值获取方法汇总 在 Web 开发中,获取浏览器的高度和宽度值是非常重要的,因为它能够帮助我们更好地布局页面元素和实现响应式设计。然而,浏览器的高度和宽度值获取方法却因浏览器的不同而有所区别...

    Javascript获取窗口(容器)的大小及位置参数列举及简要说明

    Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下: 属性方法说明: clientX 相对文档的水平坐标; clientY 相对文档的垂直坐标; offsetX 相对容器的水平坐标; offsetY ...

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    `clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...

    javascript获取网页各种高宽及位置的方法总结.docx

    ### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**:表示屏幕的宽度(以像素为单位)。 - **`screen.height`**:表示屏幕的高度(以像素为单位)。 - **`screen....

    JavaScript-JavaScript语法集锦

    本文档将详细介绍一系列常用的 JavaScript 语法和方法,帮助开发者更好地理解和应用这些功能。 #### 二、核心语法及功能介绍 ##### 1. 对象操作 - **`click()` 方法**:模拟对象被点击的动作。例如,如果希望某个...

    Javascript获取页面、屏幕尺寸大小参数.

    在JavaScript编程中,获取页面和屏幕尺寸大小是前端开发中常见的需求之一,这涉及到一系列的属性和方法,用于测量浏览器窗口、文档元素以及设备屏幕的大小。以下将详细解析如何利用JavaScript来获取这些参数,包括...

    JS event使用方法详解

    6. offsetX和offsetY属性可以用来获取鼠标指针相对于触发事件元素的位置,这在需要根据鼠标位置来执行特定操作时非常有用。 7. returnValue属性可以用来取消事件的默认行为,例如在点击链接时阻止其跳转。 在处理...

    js 画图 图画板 js 画图 图画板

    在JavaScript的世界里,"js 画图 图画板"是一个常见的需求,特别是在创建交互式Web应用、在线教育平台或是设计工具中。JavaScript提供了一系列的库和API,使得开发者能够利用HTML5的Canvas元素来实现画图功能。让...

    JS获取浏览器窗口大小获取屏幕,浏览器,网页高度宽度[文].pdf

    以下是一些关键的JavaScript属性和方法,用于获取这些信息: 1. **网页可见区域大小**: - `document.body.clientWidth`:返回网页在浏览器窗口中的可视宽度,不包括滚动条。 - `document.body.clientHeight`:...

    javascript 获取鼠标的绝对位置 event

    在JavaScript中,获取鼠标的绝对位置是常见的需求,特别是在实现交互式用户界面或者进行鼠标跟踪时。`event`对象是JavaScript中的一个内置对象,它包含了有关当前事件(如鼠标点击或移动)的各种信息,其中包括鼠标...

    原生js+canvas实现图片裁剪

    接下来,我们用JavaScript获取canvas元素,并创建一个绘图环境(context): ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ``` 图片裁剪的核心在于两个...

Global site tag (gtag.js) - Google Analytics