javascriptはどのようにマウスのクリック位置の座標を取得しますか?

4516 ワード

javascriptはどのようにマウスのクリック位置の座標を取得しますか?マウスで要素をクリックすると、現在のマウスポインタの座標を得る必要がある場合があります.この章ではこの目的を簡単に紹介します.私たちが必要とするマウス座標の参照対象も異なる場合がありますが、以下のように分類して紹介します.一.表示画面の座標に対して:screenXとscreenY属性を使ってマウスの画面の左端と上端に対する距離を取得できます.コードは以下の通りです.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
#mydiv
{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function()
{
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev)
  {
    ev=window.event||ev;
    ospan.innerHTML="x:"+ev.screenX+"y:"+ev.screenY;
  }
}
</script> 
</head>
<body>
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

以上のコードは、緑色のdivをクリックすると、マウスポインタの画面内の座標を表示できます.
説明:この二つの属性はすべての主流ブラウザで互換性が良いです.二.ブラウザウィンドウに対する座標を取得する:より多くの場合、ブラウザウィンドウに対するマウスポインタの座標を取得したいです.clientXとclientY属性を使用して実現できます.コードの例は以下の通りです

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
#mydiv
{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function()
{
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev)
  {
    ev=window.event||ev;
    ospan.innerHTML="x:"+ev.clientX+"y:"+ev.clientY;
  }
}
</script> 
</head>
<body>
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

以上のコードは、緑色のdivをクリックすると、ブラウザウィンドウにマウスポインタの座標が表示されます.
説明:この二つの属性はすべての主流ブラウザで互換性が良いです.追加紹介:clientXとclientY属性はブラウザに対する座標を取得しますが、body(ここのbodyはとりあえずページに相当します)に対する座標を取得したい場合があります.しかし、ウェブページが長すぎると入手できなくなります.ファイアフォックスビューアの下でPageXとPageYを使用して実現できます.この2つの属性はすでに考慮されています.しかし、他のブラウザはまだサポートされていません.しかし、document.body.scrollLeft、document.body.scrollTopを通じてページスクロールの変位を計算することができますが、IEの下ではdocument.document Element.scrollLeft、document.document.document.scrolltopを通じて計算することができます.コードの例は以下の通りです

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
*
{
  margin:0px;
  padding:0px;
}
#mydiv
{
  width:100px;
  height:100px;
  background-color:green;
  margin:100px;
}
</style>
<head>
<script type="text/javascript"> 
window.onload=function()
{
  var odiv=document.getElementById("mydiv");
  var ospan=document.getElementById("myspan");
  odiv.onclick=function(ev)
  {
    ev=window.event||ev;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = ev.pageX || ev.clientX + scrollX;
    var y = ev.pageY || ev.clientY + scrollY;
    ospan.innerHTML="x:"+x+"y:"+y;
  }
}
</script> 
</head>
<body style="height:1200px;">
<div id="mydiv"></div>
<span id="myspan"></span>
</body>
</html>

以上のコードは、ドキュメントに対するマウスポインタの座標を取得します.
三.マウスポインタのある要素に対する座標を取得します.ここでは説明しません.関連する内容は、現在のコンテナに対するマウスポインタの座標を取得する方法を参照してください.
原文の住所は:http://www.softwhy.com/forum.php?mod=viewthread&tid=8210
詳細は下記を参照してください.http://www.softwhy.com/javascript/

JS条件文最適化