C++js 获取鼠标的相对化地方

http://www.cnblogs.com/wuming/archive/2009/05/07/1452029.html

js
获取鼠标的相对地方

今日写的台本在得到鼠标地点的时候有点标题。在IE中始终当有滚动条的时候,发现document.body.scrollTop并不曾起到作用。
新生在google中搜寻到壹篇小说Mouse Cursor
Position
,详细介绍了浏览器鼠标定位的难点。各样浏览器对鼠标定位的正规化区别,就连不通版本的ie对固定帮忙都不雷同。
document.body.scrollLeft,document.body.scrollTop只用于IE陆以前的版本,在IE陆中,对没有公布DOCTYPE,也许透露的是transitional
DOCTYPE,那么IE6将应用document.documentElement.scrollLeft
来获得鼠标的断然地方。

Stephen
Chapman
提供的函数做个记录

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

from
:http://jnote.cn/blog/javascript/javascript-mouse-cursor-position.html

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.clientYC++, 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(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
   return evt.clientX + (document.documentElement.scrollLeft ?
   document.documentElement.scrollLeft :
   document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
   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 (for static objects).
Opera 7 appears to use these fields to give the position of the mouse
cursor relative to the bottom left corner of the screen.

 

 还要别的的情状:

javascript
获取控件的相对化地点

调用方法:
var pos=GetObjPos(ID);

C++ 1function CPos(x, y)
C++ 2{
C++ 3    this.x = x;
C++ 4    this.y = y;
C++ 5}
C++ 6//获取控件的地点
C++ 7function GetObjPos(ATarget)
C++ 8{
C++ 9    var target = ATarget;
C++ 10    var pos = new CPos(target.offsetLeft, target.offsetTop);
C++ 11    
C++ 12    var target = target.offsetParent;
C++ 13    while (target)
C++ 14    {
C++ 15        pos.x += target.offsetLeft;
C++ 16        pos.y += target.offsetTop;
C++ 17        
C++ 18        target = target.offsetParent
C++ 19    }
C++ 20    
C++ 21    return pos;

C++ 22}

上边是我自身费用品种中的实例:

 

 1 <script type=”text/jscript” language=”jscript” >
 2  
 3      function showPopup(obj,evt) {
 4          var strDate = $(obj).attr(‘dateTime’);
 5          var strUserName = $(obj).attr(‘userName’);
 6          var id = “event_” + strDate.replace(/-/g, ”);
 7          var box = $(‘#’+id);
 8          if (box.length == 0) {
 9              $(document.body).append(“<div id='” + id + “‘ class=’popupinfo’></div>”);
10              box = $(‘#’ + id);
11             box.css(“position”, “absolute”);
12              box.css(“display”, “block”);
13              box.css(“z-index”, “100”);
14              box.append(‘<input id=”File1″ type=”image”  src=”../Images/Onload.gif”/>’);
15              Microsoft.PMWeb.WebSite.SiteService.GetEventInfoByDate(strUserName + “#” + strDate, onSuccess, onFailed, “1111”);
16          }
17          else {
18              var imgLoad = box.find(“:image”);
19              imgLoad.css(“display”, “none”);
20          }
21          var objQueryPosition = GetObjPos(obj);
22          box.css(“left”, mousePos.x);
23          box.css(“top”, mousePos.y);
24          box.css(“display”, “”);
25          function onSuccess(result, context, methodName) {
26              var imgLoad = box.find(“:image”);
27              imgLoad.css(“display”,”none”);
28              box.append(result);
29          }
30          function onFailed(error, context, methodName) {
31              var errorMessage = error.get_message();
32              alert(“Review Failed:” + errorMessage);
33          }
34      }     
35      function hidePopup(obj) {
36          var strDate = $(obj).attr(‘dateTime’);
37          var strUserName = $(obj).attr(‘userName’);
38          var id = “event_” + strDate.replace(/-/g, ”);
39          var box = $(‘#’+id);
40          if (box.length != 0) {
41              $(‘#’+id).css(“display”, “none”);
42          }
43      }
44 
45      var mousePos;
46      function mouseMove(ev) {
47          ev = ev || window.event;
48          mousePos = mouseCoords(ev);
49      }
50      function mouseCoords(ev) {
51          if (ev.pageX || ev.pageY) {
52              return { x: ev.pageX, y: ev.pageY };
53          }
54          return {
55              x: ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft),
56              y: ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)
57          };
58      }
59      document.onmousemove = mouseMove;
60  </script>
61 

复制代码

 测试了,拾叁分准确.

        var pos = GetObjPos($id(“t1”));
        $id(“div2”).style.left = pos.x + “px”;//”10px”;
        //$id(“div2”).style.top = pos.y * 1px;
        $id(“div2”).style.top = pos.y + “px”;