技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] マウス位置取得 ・サイトマップ [Shift-S]

■ マウス位置取得:kl_mousex,y()

マウスを動かした時(onmousemove)、ボタンを押した時(onmousedown)の マウスカーソルの座標を取得します。

【マウス位置取得「kl_mousex/y(e)」<keynavi_ja.js】

//----------------------------
//kl_mousex/y(e,onscreen)
//返り値:マウスカーソルの位置座標
//e:イベントオブジェクト
//onscreen:スクリーン上の座標を取得したい場合真に
//----------------------------
function kl_mousex(e,onscreen){
        if(onscreen){
                return (KL_NS4 || KL_NS6) ? e.screenX : event.screenX;
        }
        if(KL_OP6 && !KL_OP7) return event.clientX;
        return (KL_NS4 || KL_NS6) ? e.pageX : kl_slx()+event.clientX;
}
function kl_mousey(e,onscreen){
        if(onscreen){
                return (KL_NS4 || KL_NS6) ? e.screenY : event.screenY;
        }
        if(KL_OP6 && !KL_OP7) return event.clientY;
        return (KL_NS4 || KL_NS6) ? e.pageY : kl_sly()+event.clientY;
}

上のコードの「kl_slx()/sly()」はスクロール位置を返します。 引数「e」はイベントオブジェクトでNetscapeでは必須です。 IE,Operaでは「event」オブジェクトが大域的に定義されているので 「e」を使わず「event」で参照できます。

【kl_mousex/y()を使ったサンプルHTML:Copy&Paste】

<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript"><!--

//マウスの座標を下のステータスバーに表示します
function stat(s,x,y){ window.status=s+" :  ("+x+","+y+")"; }

function down(e){ stat("mousedown",kl_mousex(e),kl_mousey(e)); }
function move(e){ stat("mousemove",kl_mousex(e),kl_mousey(e)); }
function clk(e){ stat("click",kl_mousex(e),kl_mousey(e)); }

//ハンドラ関数を登録します
if(KL_NS4){
        kl_addhandler(document,'onmousedown',down);
        kl_addhandler(document,'onmousemove',move);
}else{
        kl_addhandler(document.body,'onmousedown',down);
        kl_addhandler(document.body,'onmousemove',move);
        kl_addhandler(document.body,'onclick',clk);
}
//-->
</script>

イベントハンドラの登録では 直接「document.onmousedown=func」等とすると 既存の設定内容が上書きされてしまうので「kl_addhandler()」を使います。

一般にNetscape4.xにおけるイベントハンドラの登録では 「document.captureEvents(Event.MOUSEDOWN);」の指定も必要ですが 「kl_addhandler()」内で実行されるので不要です。

下のボタンをクリック後、マウスを動かしたりクリックを実行してみて下さい。

Netscape4.xの「クリック」については 「<body onclick=...>、 document.onclick、document.body.onclick、window.onclick、self.onclick」 のいずれもきちんと動作しません。 クリックイベントを拾う代わりに「document.onmousedown」を使うのが無難です。

Tips: onmousedownの利用については 「kl_onmousedown_ex(e)」関数を定義するだけで動作する 簡単な方法があります。
参考:キーやマウスが押されたことを確認したい



【JavaScript@Keynavi.Net : 一般イベント処理編 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - マウス位置取得:kl_mousex,y()
  - Focus/Click先の要素を取得:kl_target()
  - イベントハンドラの登録:kl_addhandler()
  - ページ全体に対するイベントハンドラの登録
  - レイヤーにイベントハンドラを登録
  - フォームやリンクにイベントハンドラを登録

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] マウス位置取得 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─