getMouseX()

getMouseX()

マウスを動かした時のX座標位置を取得するためのサンプルファンクションです。document.onmousemove = Function名によるmousemove監視などのEventととセットで使い、動いた時に n4,n6,m1,o7,s1ではpageXを返し、 e4,e5,e6ではclientX+scrollTopを返します。また、o7がpageXを使っているのに対してo6がclientXを使っている部分は要注意です。これはe4,e5,e6のclientXとは異なりNetscapeのpageXと同等なので、最初に分岐しています(この場合、分岐の順番は重要です)。eventObject名はn4,n6,n7,m1用です。

*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。

Cross-Browser のための Sample Function


Syntax : getMouseX(eventObject名)





  function getMouseX(e){
    if(navigator.userAgent.search(
             "Opera(\ |\/)6") != -1 )   //o6用
        return e.clientX
    else if(document.all)               //e4,e5,e6用
        return document.body.scrollLeft+event.clientX
    else if(document.layers ||
            document.getElementById)    //n4,n6,n7,m1,o7,s1用
        return e.pageX
  }

Example

<script type='text/javascript'>
<!--

  //--マウスを動かすとmmv()を実行します
  document.onmousemove = mmv
  if(document.layers)document.captureEvents(Event.MOUSEMOVE) //n4用

  //-Opera6の全画面Event拾えない対策
  if(navigator.userAgent.search("Opera(\ |\/)6")!= -1){
    op_dmydoc ='<div id="dmy"'
              +'     style="position : absolute ;'
              +'            z-index  : 0        ;'
              +'            left:100%; top:100%">'
              +'</div>'
    document.write(op_dmydoc)
  }

  function mmv(e){
    //マウスダウンした時に実行する命令を
    //このファンクション内に書きます
    document.f0.e0.value = "X = " + getMouseX(e)
  }

  function getMouseX(e){
    if(navigator.userAgent.search(
             "Opera(\ |\/)6") != -1 )   //o6用
        return e.clientX
    else if(document.all)               //e4,e5,e6用
        return document.body.scrollLeft+event.clientX
    else if(document.layers ||
            document.getElementById)    //n4,n6,n7,m1,o7,s1用
        return e.pageX
  }
  
//-->
</script>

マウスを動かすとカーソルのX座標が<br>
フォームへ表示されます。
<br><br><br><br><br><br>
<form name="f0">
  <input type="text" name="e0">
</form>