Position的代码_javascript技巧_脚本之家

昨天写的脚本在获取鼠标位置的时候有些问题。在IE中始终当有滚动条的时候,发现document.body.scrollTop并没有起到作用。后来在google中搜索到一篇文章Mouse
Cursor
Position,详细介绍了浏览器鼠标定位的问题。各个浏览器对鼠标定位的标准不一样,就连不通版本的ie对定位支持都不一样。document.body.scrollLeft,document.body.scrollTop只用于IE6以前的版本,在IE6中,对没有宣告
DOCTYPE,或者宣告的是transitional
DOCTYPE,那么IE6将使用document.documentElement.scrollLeft
来获取鼠标的绝对位置。

将Stephen Chapman提供的函数做个记录

function mouseX return evt.pageX;else if return evt.clientX +
(document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);else
return null;}function mouseY return evt.pageY;else if return evt.clientY

  • (document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop);else
    return null;}Mouse Cursor Position Join the Discussion Questions?
    Comments? Until recently there was no standard way of determining the
    position of the mouse cursor within the browser. The W3C standards say
    that the current mouse cursor position within the browser window when an
    event is triggered should be given by event.clientX and event.clientY to
    obtain the distance from the left and top of the browser window
    respectively. I have tested this in a number of different browsers and
    have found that Internet Explorer 6, Netscape 6+, Firefox, and Opera 7+
    all produce correct values for the mouse coordinates relative to the
    browser window in these fields. To obtain the position within the web
    page you would simply add the scroll position of the page within the
    browser window. Opera 5 and 6 produced values for these fields but the
    values are relative to the top of the web page instead of relative to
    the browser window and so adding the scroll position would produce a
    wrong result with these browsers. Netscape 4 doesn’t understand these
    fields at all and so would give an error if this code were used by
    itself. One added complication is that Internet Explorer uses two
    different ways to determine the scroll position of the page. It uses
    document.body.scrollLeft and document.body.scrollTop in versions before
    version 6 as well as in version 6 when there is no DOCTYPE declared or a
    transitional DOCTYPE is declared. When IE6 is declared using a strict
    DOCTYPE document.documentElement.scrollLeft and
    document.documentElenent.scrollTop are used instead. Other browsers
    either use one of these values or pageXOffset and pageYOffset. Although
    not part of the W3C standards there is another pair of fields that will
    give the position of the mouse cursor that is useful. With the exception
    of Internet Explorer and Opera 5 and 6, all of the browsers I have
    mentioned also support event.pageX and event.pageY which give the mouse
    cursor position relative to the top left corner of the web page itself.
    Using these fields you do not have to add the scroll position of the
    page. By combining tests for both of these methods together we can
    create code to locate the mouse cursor position that will work on
    Internet Explorer, Netscape 4+, Firefox, and Opera 7+. You just need to
    pass the event to the following functions to retrieve the appropriate
    position on the web page. function mouseX return evt.pageX; else if
    return evt.clientX + (document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft : document.body.scrollLeft); else
    return null; } function mouseY return evt.pageY; else if return
    evt.clientY + (document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop); else
    return null; } There are a couple of other pairs of fields that give
    mouse cursor positions that are less useful. The fields event.screenX
    and event.screenY are defined in all of the browsers I tested. They give
    the position of the mouse cursor relative to the top left corner of the
    screen. Without knowing the position of the top left corner of the
    browser window this information is not very useful with respect to being
    able to interact with the web page. The fields event.x and event.y also
    exist in Netscape 4, Internet Explorer, and Opera 7+. In Netscape 4
    these fields give the position within the web page exactly the same as
    the pageX and pageY fields. In Internet Explorer and Opera 8 they give
    the position of the mouse cursor within the current object (if that
    object is positioned absolute, relative, or fixed) or within the page .
    Opera 7 appears to use these fields to give the position of the mouse
    cursor relative to the bottom left corner of the screen.
    还要其他的情况: 调用方法: 复制代码
    代码如下: var pos=GetObjPos; function CPos { this.x = x; this.y = y; }
    //获取控件的位置 function GetObjPos { var target = ATarget; var pos =
    new CPos(target.offsetLeft, target.offsetTop); var target =
    target.offsetParent; while { pos.x += target.offsetLeft; pos.y +=
    target.offsetTop; target = target.offsetParent } return pos; }
    下面是我自己开发项目中的实例: 复制代码
    代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注