現在のマウスのX,Y座標offset client eventを取得


マウスを小さな図に移動して大きな図を表示するために、マウスイベントを利用して新しいレイヤを作成して大きな図を表示しました.もちろん前にXY座標を取得して現在のマウスのX,Y座標を取得することが望ましい
function SelfXY(){
     var yScrolltop;
     var xScrollleft;
     if (self.pageYOffset || self.pageXOffset) {
         yScrolltop = self.pageYOffset;
         xScrollleft = self.pageXOffset;
     } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){      // Explorer 6 Strict
         yScrolltop = document.documentElement.scrollTop;
         xScrollleft = document.documentElement.scrollLeft;
     } else if (document.body) {// all other Explorers
         yScrolltop = document.body.scrollTop;
         xScrollleft = document.body.scrollLeft;
     }
     arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY)
     return arrayPageScroll;
}
 
添付:マウスおよびオブジェクト座標制御属性offsetTopは、レイアウトまたはoffsetParent属性によって指定された親座標に対するオブジェクトの計算先端位置を取得します.offsetLeftは、レイアウトまたはoffsetParentプロパティによって指定された親座標に対するオブジェクトの計算左側の位置を取得します.offsetHeightは、レイアウトまたは親座標offsetParentプロパティによって指定された親座標に対するオブジェクトの高さを取得します.IE、OperaはoffsetHeight=clientHeight+スクロールバー+枠線とする.NS,FFはoffsetHeightがウェブコンテンツの実際の高さであり,clientHeightより小さくてもよいと考えている.offsetWidthは、レイアウトまたは親座標offsetParentプロパティによって指定された親座標に対するオブジェクトの幅を取得します.offsetParentは、オブジェクトoffsetTopとoffsetLeftのプロパティを定義するコンテナオブジェクトの参照を取得します.ClientHeightは、オブジェクトの高さを取得し、エッジ、枠線、スクロールバー、またはオブジェクトに適用される可能性のある補白を計算しません.ClientHeightには異論はなく、コンテンツ可視領域の高さ、すなわちページブラウザでコンテンツが見えるこの領域の高さは、一般的に最後のツールバー以下からステータスバー以上のこの領域であり、ページコンテンツとは無関係であると考えられています.ClientLeftはoffsetLeftプロパティと顧客領域の実際の左側との距離を取得します.ClientTopはoffsetTopプロパティと顧客領域の実際の先端との距離を取得します.ClientWidthは、オブジェクトの幅を取得し、エッジ、枠線、スクロールバー、またはオブジェクトに適用される可能性のある補白を計算しません.SCROLLプロパティscrollは、スクロールがオフになっているかどうかを設定または取得します.scrollHeightオブジェクトのスクロール高さを取得します.scrollLeftは、オブジェクトの左境界とウィンドウで現在表示されているコンテンツの左端との距離を設定または取得します.scrollTopは、オブジェクトの最上位とウィンドウで表示されるコンテンツの最上位との間の距離を設定または取得します.scrollWidthオブジェクトのスクロール幅を取得します.eventプロパティxは、親ドキュメントに対するマウスポインタの位置のxピクセル座標を設定または取得します.screenXは、ユーザ画面のx座標offsetXに対する取得マウスポインタ位置の設定またはトリガイベントのオブジェクトに対するマウスポインタ位置のx座標を取得します.ClientXは、ウィンドウの顧客領域に対するマウスポインタの位置のx座標を設定または取得します.顧客領域にはウィンドウ自体のコントロールとスクロールバーは含まれません.
  • window.event
  • IE:windowがあります.eventオブジェクト
  • FF:windowなし.イベントオブジェクト.eventオブジェクトは、関数のパラメータに渡すことができます.onmousemove=doMouseMove(event)
  • マウスの現在の座標
  • IE:event.xとevent.y.
  • FF:event.それは...pageY.
  • 汎用:両方event.ClientXとevent.ClientYプロパティ.

  • マウスの現在の座標(スクロールバーが転がる距離を加える)
  • IE:event.offsetXとevent.offsetY.
  • FF:event.それは...layerY.

  • ラベルのxとyの座標位置:style.ここにいるよposTop
  • IE:あります.
  • FF:いいえ.
  • 汎用:object.offsetLeftとobject.offsetTop.

  • フォームの高さと幅
  • IE:document.body.offsetWidthとdocument.body.offsetHeight.注意:この場合、ページには必ずbodyラベルがあります.
  • FF:window.私はあなたを愛しています.innerHegiht,document.documentElement.ClientWidthとdocument.documentElement.clientHeight.
  • 汎用:document.body.ClientWidthとdocument.body.clientHeight.

  • イベントの追加
  • IE:element.attachEvent("onclick", func);.
  • FF:element.addEventListener("click", func, true).
  • 汎用:element.onclick=func.onclickイベントはいずれも使用できますが、onclickと上記の2つの方法の効果は異なり、onclickは1つのプロシージャのみを実行し、attachEventとaddEventListenerは1つのプロシージャリスト、すなわち複数のプロシージャを実行します.例:element.attachEvent("onclick", func1);element.attachEvent(「onclick」,func 2)はfunc 1とfunc 2の両方で実行されます.

  • ラベルのカスタム属性
  • IE:タグdiv 1に属性valueを定義した場合、div 1.valueとdiv 1[「value」]はこの値を取得します.
  • FF:div 1は使用できません.valueとdiv 1[「value」]を取ります.
  • 汎用:div 1.getAttribute("value").

  • 親ノード、子ノード、および削除ノード
  • IE:parentElement、parement.children,element.romoveNode(true).
  • FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node).

  • IE:VML.
  • FF:SVG.

  • :透過性
  • IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).
  • FF:opacity:0.6.

  • :フィレット
  • IE:フィレットはサポートされていません.
  • FF:-moz-border-radius:4 px、または-moz-border-radius-topleft:4 px;moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;.

  • :二重線凹凸ボーダー
  • IE:border:2px outset;.
  • FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;.