 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] マウス位置取得
|
・サイトマップ [Shift-S] |
 |
■ マウス位置取得：kl_mousex,y()
マウスを動かした時(onmousemove)、ボタンを押した時(onmousedown)の
マウスカーソルの座標を取得します。
//----------------------------
//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;
}
<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>
【マウス位置取得「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-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] マウス位置取得
|
・サイトマップ [Shift-S] |