スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

javascriptテスト

マウス位置チェック
X: Y: (クライアント座標系)
X: Y: (グローバル座標系)
X: Y: (スクリーン座標系)


ブログ内でJavaScriptが使えるのかテストしてみましたがちゃんと使えるようです。

ブログにこのようにコントロールを配置して
X:<input type="text" id="text_client_x">
Y:<input type="text" id="text_client_y"> (クライアント座標系)<br/>
X:<input type="text" id="text_global_x">
Y:<input type="text" id="text_global_y"> (グローバル座標系)<br/>
X:<input type="text" id="text_screen_x">
Y:<input type="text" id="text_screen_y"> (スクリーン座標系)<br/>


スクリプトは下記のようなものを別ファイルでアップロードしておき、本文でscriptタグで参照すれば
スクリプトが動きます。
(function ()
{
  // スクロール位置を取得
  function DocumentGetScrollPosition(document_obj)
  {
    return{
      x:document_obj.body.scrollLeft || document_obj.documentElement.scrollLeft,
      y:document_obj.body.scrollTop  || document_obj.documentElement.scrollTop
    };
  }

  function SetTextbox(id, text)
  {
    var element = document.getElementById(id);
    element.value = text;
  }

  function PlotMousPosOnMouseMove(e)
  {
    var scroll_pos = DocumentGetScrollPosition(document);

    SetTextbox("text_client_x", e.clientX);
    SetTextbox("text_client_y", e.clientY);
    SetTextbox("text_global_x", e.clientX + scroll_pos.x);
    SetTextbox("text_global_y", e.clientY + scroll_pos.y);
    SetTextbox("text_screen_x", e.screenX);
    SetTextbox("text_screen_y", e.screenY);
  }

  function OnMouseMoveGl(e)
  {
    PlotMousPosOnMouseMove(e);
  }

  // イベントのリッスンを開始する
  if(document.addEventListener)
  {
    // マウスを移動するたびに実行されるイベント
    document.addEventListener("mousemove" , OnMouseMoveGl);
  }
  else if(document.attachEvent)
  {
    // アタッチイベントに対応している

    // マウスを移動するたびに実行されるイベント
    document.attachEvent("onmousemove" , OnMouseMoveGl);
  }
})();
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
最新記事
カテゴリ
Qt (21)
SDL (2)
MFC (2)
検索フォーム
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
リンク
リンク(管理用)
FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。