プロパティ変化の認識

２

　イベント

basic.gif (3042 バイト)

２

　マウスの有効範囲の指定

普通、マウスはブラウザ上だったらどこでも使えるよね。
今回の命令では、一時的にあるオブジェクト以外のマウスのクリック操作を制御することができるんだ。

■.setCapture(▲)　・・・・・　■のみマウスイベントを受け付ける
■：マウスイベントを独占するオブジェクト
▲：■以外の場所でのマウスイベントの有無（true,false）

これも、使い道は様々なんだけれど、
例えば、ポップアップメニューなどでは、メニューを選択している間は他のリンクなどは押せない方がいいよね。
そのようなときに、ポップアップメニュー以外はマウスが効かないように制御すればいいんだ。
まず、■.setCapture(▲)の■の部分では、マウスイベントを受けることのできるオブジェクトを指定することができるんだ。
つまり、ポップアップの場合ポップアップウィンドウにつけた名前を■に入れると、ポップアップウィンドウのみにマウスイベントが適用されるんだ。
また、▲ではそのオブジェクトがマウスイベントを受け取るかどうかを指定できるんだ。
trueを指定すると、全くマウスイベントを受けないんだ。
また、falseを指定すると現在のオブジェクトのみマウスイベントが適用される状態になるんだ。
次に、マウスの制限をした後はそれを解除しなければならないよね。
これは、そんなに難しくなくて、

■.releaseCapture(▲)　・・・・・　マウスイベントの開放
■：マウスイベントを独占していたオブジェクト
▲：■以外の場所でのマウスイベントの有無（true,false）

■はマウスを開放したいので、マウスイベントを独占していたさっきのオブジェクトなんだ。
また、▲は特に指定はしなくてもいいけれど、できたらsetCapture()の時の指定をしてやろう。

<HTML>
<HEAD>
<TITLE>マウスの有効範囲の指定</TITLE>
<SCRIPT language="JavaScript">
<!--
//ポップアップウィンドウ
var flag=0;
function popup(){
	/*ポップアップウィンドウを開く*/
	if(flag ==0){
		box.style.visibility = "visible";
		box.style.left = window.event.clientX;
		box.style.top = window.event.clientY;
		box.setCapture(false);　　　　　　　　//id="box"以外はマウスイベントを受け付けない
		flag = 1;
	}
	/*ポップアップウィンドウを閉じる*/
	else{
		box.style.visibility = "hidden";
		box.releaseCapture(false);　　　　　//マウスイベント開放
		flag = 0;
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY onclick="popup()">

<!--ポップアップウィンドウ-->
<SPAN id="box" style={background-color:#ffffaa;position:absolute;visibility:hidden;height:200;width:200;}>
ポプアップウィンドウ<P>
<A id="mylink" href="#">リンク１</A><P>
<A id="mylink" href="#">リンク２</A><P>
<A id="mylink" href="#">リンク３</A><P>
</SPAN>
<!--ポップアップウィンドウ終わり-->

<A id="mylink" href="#">リンク１</A><P>
<A id="mylink" href="#">リンク２</A><P>
<A id="mylink" href="#">リンク３</A><P>
<HR>
</BODY>
</HTML>

プログラム自体はまだやっていないところなどもあって少し難しいかもしれないけれど、着目してほしいのは、ポップアップウィンドウを開く時にbox.setCapture(false);という命令で、boxという名前を付けたもののみにマウスが機能するように指定しているところと、次にポップアップウィンドウを閉じる時にbox.releaseCapture(false);という命令でマウスの独占を開放して普通の状態に戻しているところなんだ。
このように、ウィンドウを開くとマウスが使えなくなり、ウィンドウを閉じるとマウスが使えるようになるプログラムが作れるんだ。
これは、ウィンドウに操作を集中させたい時に使うことができるよね。

このように、あるものが変化した時にそれに連動してある命令を出すことができるんだ。
これを利用すると、さまざまなタグを連動させたスクリプトも作ることができるね。

ここで標準編は終わりです。
　目次へ戻る

　プロパティ変化の認識
 　印刷イベント