`
zpball
  • 浏览: 916638 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js坐标位置详解 及获取(ie ff)

阅读更多
function    getAbsPoint(e)   
{   
     var    x    =    e.offsetLeft,    y    =    e.offsetTop;   
     while(e=e.offsetParent) 
     { 
        x    +=    e.offsetLeft;   
        y    +=    e.offsetTop;
     } 
     alert("x:"+x+","+"y:"+y);   
}  


方法2:

   function    getAbsPoint(obj)   
   {   
      var    x,y;   
      oRect    =    obj.getBoundingClientRect();   
     x=oRect.left   
     y=oRect.top   
     alert("("+x+","+y+")")   
   }  


JS中获得窗口属性的方法  
   
   1。获得屏幕的分辨率:  
   screen.width  
   screen.height  
   
   2。获得窗口大小:  
   document.body.clientWidth  
   document.body.clientHeight  
   
   3。获得窗口大小(包含Border、Scroll等元素)  
   document.body.offsetWidth  
   document.body.offsetHeight 






由风干的果子制作,非常详细




Js如何取鼠标的当前位置/坐标(ie,ff)

一般在Javascript中,我们用event.clientX来取当前鼠标在文档中的坐标,用event.ScreenX来去当前鼠标在屏幕中的坐标。但是,在Mozilla系列浏览器中,直接使用event是不行的,会提示说event没有定义,因此在Mozilla或Firefox中调用时,需要变通一下。

在调用函数的时候,始终传一个event参数进去,在Mozilla中,会将Event对象传进去,而在IE下默认就有Event对象,也不冲突,这个问题就解决了。

以下这个例子就能够在IE和Mozilla中都正常运行。

当前鼠标坐标为:X:Y:源代码:

<pre onmousemove=”DisplayMp(event)” class=”code”>
当前鼠标坐标为:
X:<span id=”mp_x”></span>
Y:<span id=”mp_y”></span>
</pre>
<script type=”text/javascript”>
<!–//–><![CDATA[//>
<!--
/**
* 显示/隐藏指定的对象(style.display方式)
* @param object event 事件,用于捕捉鼠标位置等,可省略
*/
function DisplayMp(event)
{
document.getElementById('mp_x').innerHTML = event.clientX + 'px';
document.getElementById('mp_y').innerHTML = event.clientY + 'px';
} // end of function DisplayMp
//--><!]]>
</script>

另外取到鼠标的坐标,赋值给style.top等属性的时候,后面需要加上单位,不然也会提示错误。下面就是一个正确的例子:

obj.style.top = event.clientX + 10 + ‘px’;
See Also:

Firefox中Javascript使用event对象需要注意的问题
“糊涂博士”的窗口属性方法事件网页
Update @ 2007-03-29
如果在js中使用html_obj.onclick = function () { some_action uses Event }这类语法时,如果遇到Event,注意Event最好大写,不然不会生效。

Update @ 2008-05-18
似乎找到最终的优秀解决方法了,首先用一句话解决event对象的兼容性:

if (!e) var e = window.event;同时在调用函数的时候,如果没有显式传递Event,它会自动赋值。同时还找到取鼠标位置更兼容的方法:

if (e.pageX || e.pageY) {    posx = e.pageX;    posy = e.pageY;}else if (e.clientX || e.clientY) {    posx = e.clientX + document.body.scrollLeft        + document.documentElement.scrollLeft;    posy = e.clienty + document.body.scrollTop        + document.documentElement.scrollTop;}结合起来,用jQuery调用的例子:

$("#showhide_svninfo").mouseover(function(e) {    SwitchDisplay('#svninfo', 'block', e);});这样综合下来,兼容性就非常好了。不过本文中的例子我没有再按照这个改,好像在IE下又不灵光了。

  • 大小: 17 KB
  • 大小: 82.2 KB
分享到:
评论

相关推荐

    IE和FF兼容问题

    ### IE和FF兼容问题详解 #### 一、引言 随着互联网技术的不断发展与普及,网页设计者们面临着越来越复杂的浏览器兼容性挑战。在众多浏览器中,Internet Explorer(简称IE)与Firefox因其庞大的用户基数而成为了...

    IE和ff的兼容技巧

    ### IE与Firefox的兼容技巧详解 #### 一、概述 在网页开发过程中,浏览器兼容性问题一直是前端开发者面临的重要挑战之一。不同的浏览器由于其内核的不同,在解析HTML、CSS及JavaScript时存在差异,这就导致了相同...

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event....

    JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    例如,IE6.0和FF1.06+将`clientWidth`和`clientHeight`定义为元素的宽度和高度加上内填充,而IE5.0/5.5则减去边框。因此,当编写跨浏览器的代码时,需要注意这些兼容性问题。 此外,`scrollTop`属性与`scrollLeft`...

    IE、火狐兼容性问题

    ### IE与火狐浏览器兼容性问题详解 #### 一、概述 随着Web技术的不断发展,浏览器作为用户访问互联网的重要工具之一,在不同的版本间存在着一定的差异性。这些差异性导致了在开发网页应用时,需要特别关注不同...

    JavaScript网页定位详解

    4. 精确定位元素:属性`scrollLeft`、`scrollTop`、`scrollWidth`、`clientWidth`、`offsetWidth`、`offsetHeight`、`offsetLeft`和`offsetTop`可以用来精确控制和获取页面元素的位置及尺寸。 5. 鼠标事件中的坐标...

    javascript小技巧&nbsp;&nbsp;超强推荐第3 5页.docx

    该方法提供了一种获取DOM元素相对于视口的位置的方式,包括其左上角坐标和尺寸大小。 **代码实现:** ```javascript var oRect = obj.getBoundingClientRect(); console.log(oRect.left); // 控件左侧距离视口左侧...

    详解原生js实现offset方法

    在JavaScript中,`offset`方法通常用于获取一个元素在页面上的绝对位置,包括距离文档顶部的距离(`top`)和距离文档左侧的距离(`left`)。这个方法在开发过程中非常实用,尤其在需要进行定位或者事件处理时。本文...

    javascript实现的三维正方体(兼容ie7,ff)

    根据给定的信息,本文将详细解析如何使用JavaScript在IE7及Firefox等浏览器上实现一个三维正方体,并探讨其中涉及的关键技术点。 ### 一、背景介绍 在Web开发早期阶段,尤其是IE7时代,浏览器对HTML5 Canvas、...

    javaScript55个经典技巧

    ### JavaScript 55个经典技巧知识点详解 #### 1. 阻止右键菜单的显示 通过在页面元素上设置 `oncontextmenu` 事件处理程序,可以阻止默认的上下文菜单出现: ```html ;"&gt; ``` 或针对特定元素: ```html ;"&gt; 禁止...

    javascript之DIV拖动类 支持在FF下拖动,调用简单

    ### JavaScript之DIV拖动类详解 #### 一、概述 本文档主要介绍了一种JavaScript实现的DIV拖动类,该类特别强调了在Firefox(FF)浏览器下的兼容性与简单的调用方式。拖动功能是网页交互设计中的一个重要组成部分,...

    javaScript个人学习总结很多小方面的应用

    ### JavaScript个人学习总结:多个小方面应用详解 #### 一、禁用上下文菜单与文本选取 1. **禁用右键菜单**: - 使用`oncontextmenu`事件可以阻止浏览器默认的上下文(右键)菜单弹出。 - 示例代码: ```html ...

    javascript常用操作技巧

    ### JavaScript 常用操作技巧详解 在前端开发领域,JavaScript 是一门不可或缺的语言,它能够帮助开发者实现多种功能,从而提升用户体验。本文将基于提供的文件信息,深入解析一系列JavaScript常用操作技巧及其应用...

    Javascript中最常用的55个经典技巧

    ### JavaScript中最常用的55个经典技巧详解 #### 技巧5:自定义浏览器图标 - **功能描述**:通过设置`&lt;link&gt;`标签中的`Shortcut Icon`和`Bookmark`属性,可以让网站在浏览器地址栏以及用户的收藏夹中显示自定义图标...

    JS网页常用小技巧

    **知识点:** 使用JavaScript或VBScript来获取DOM元素在页面中的确切坐标位置。 ```html &lt;!-- JavaScript 示例 --&gt; &lt;script language="Javascript"&gt; function getIE(e) { var t = e.offsetTop; var l = e....

    excCommand命令

    ### execCommand 命令详解 #### 概述 `execCommand` 是一个在早期浏览器中广泛使用的非标准 JavaScript 方法,主要用于实现富文本编辑器的功能。通过调用 `document.execCommand`,开发者能够轻松地执行一系列与...

Global site tag (gtag.js) - Google Analytics