當我們需要從Browser端,取得目前滑鼠位置座標的時候,透過下面的JavaScript function,即可達到我們想要的效果,在這邊分享給大家!

以下的程式碼已經做過相容性測試,確定可以跑在IE, FireFox, Chrom, Safari上面。程式會自動去偵測你所使用的Browser版本,自動使用對應的方式取得滑鼠座標!

※以下是原始碼:

   1: _sys_userAgent = navigator.userAgent;
   2: _sys_browser = "";
   3:  
   4: if (chk_browser("Safari"))
   5:     _sys_browser = "Safari";
   6: else if (chk_browser("Firefox"))
   7:     _sys_browser = "Firefox";
   8: else if (chk_browser("MSIE 7"))
   9:     _sys_browser = "MSIE7";
  10: else if (chk_browser("MSIE 6"))
  11:     _sys_browser = "MSIE6";
  12: else
  13:     _sys_browser = "Others";
  14:  
  15: if (chk_browser("Firefox"))
  16:     document.onmousemove = FF_mouse_point;
  17:     
  18: function chk_browser(str)
  19: {
  20:     if (_sys_userAgent.toUpperCase().indexOf(str.toUpperCase()) != -1)
  21:         return (true);
  22:     else
  23:         return (false);
  24: }
  25:  
  26: function FF_mouse_point(_event)
  27: {
  28:     if (chk_browser("Firefox"))
  29:     {
  30:         try
  31:         {
  32:             MOUSE_X = _event.clientX
  33:                 + document.body.scrollLeft
  34:                 + document.documentElement.scrollLeft;
  35:                 
  36:             MOUSE_Y = _event.clientY
  37:                 + document.body.scrollTop
  38:                 + document.documentElement.scrollTop;
  39:         }
  40:         catch (e)
  41:         {
  42:             window.status = e.Message + " (" + MOUSE_X + ", " + MOUSE_Y + ")";
  43:             return (false);
  44:         }
  45:     }
  46: }
  47:  
  48: function get_mouse_point()
  49: {
  50:     var point = new Array();
  51:     var e = window.event;
  52:  
  53:     if (chk_browser("Firefox"))
  54:     {
  55:         point.push(MOUSE_X);
  56:         point.push(MOUSE_Y);
  57:         return (point);
  58:     }
  59:  
  60:     if (e)
  61:     { 
  62:         if (e.pageX || e.pageY)
  63:         {
  64:             point.push(e.pageX);
  65:             point.push(e.pageY);
  66:         }
  67:         else if (e.clientX || e.clientY)
  68:         {
  69:                point.push(e.clientX
  70:                 + document.body.scrollLeft
  71:                 + document.documentElement.scrollLeft
  72:                 );
  73:             point.push(e.clientY
  74:                 + document.body.scrollTop
  75:                 + document.documentElement.scrollTop
  76:                 );
  77:         }
  78:     }
  79:     
  80:     if (point[0] < 10)
  81:         point[0] = 10;
  82:  
  83:     if (point[1] < 10)
  84:         point[1] = 10;
  85:     
  86:     return (point);
  87: }



_sys_userAgent = navigator.userAgent;
_sys_browser = "";

if (chk_browser("Safari"))
_sys_browser = "Safari";
else if (chk_browser("Firefox"))
_sys_browser = "Firefox";
else if (chk_browser("MSIE 7"))
_sys_browser = "MSIE7";
else if (chk_browser("MSIE 6"))
_sys_browser = "MSIE6";
else
_sys_browser = "Others";

if (chk_browser("Firefox"))
document.onmousemove = FF_mouse_point;

function chk_browser(str)
{
if (_sys_userAgent.toUpperCase().indexOf(str.toUpperCase()) != -1)
return (true);
else
return (false);
}

function FF_mouse_point(_event)
{
if (chk_browser("Firefox"))
{
try
{
MOUSE_X = _event.clientX
+ document.body.scrollLeft
+ document.documentElement.scrollLeft;

MOUSE_Y = _event.clientY
+ document.body.scrollTop
+ document.documentElement.scrollTop;
}
catch (e)
{
window.status = e.Message + " (" + MOUSE_X + ", " + MOUSE_Y + ")";
return (false);
}
}
}

function get_mouse_point()
{
var point = new Array();
var e = window.event;

if (chk_browser("Firefox"))
{
point.push(MOUSE_X);
point.push(MOUSE_Y);
return (point);
}

if (e)
{
if (e.pageX || e.pageY)
{
point.push(e.pageX);
point.push(e.pageY);
}
else if (e.clientX || e.clientY)
{
point.push(e.clientX
+ document.body.scrollLeft
+ document.documentElement.scrollLeft
);
point.push(e.clientY
+ document.body.scrollTop
+ document.documentElement.scrollTop
);
}
}

if (point[0] < 10)
point[0] = 10;

if (point[1] < 10)
point[1] = 10;

return (point);
}
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 weihsinchiu 的頭像
    weihsinchiu

    維新生活日記

    weihsinchiu 發表在 痞客邦 留言(0) 人氣()