タグ: イベント処理

/*
*Drag.js：絶対位置指定されたHTML要素をドラッグする
*
*このモジュールはdrag()関数を定義する
*イベントハンドラから呼び出される。
*この後のmousemoveイベントで、指定された要素を移動する
*mouseupイベントでドラッグをやめる
*この実装は、標準イベントモデルでも、IEイベントイベントモデルでも動作する
*例15-8のgetScrollOffsets()関数を必要とする
*
*引数：
* elementToDrag：mousedownイベントが発生した要素か、
*	その要素を包含する要素。
*	この要素は絶対位置指定していなければならない
*	style.leftとstyle.topの値が、ユーザのドラッグに応じて変更される
* event： mousedownイベントのEventオブジェクト
*/
function drag(elementToDrag, event) {
	//マウスの初期位置。ドキュメント座標に変換される
	var scroll = getScrollOffsets();	//例 15-8で定義されているユーティリティ関数
	var startX = event.clientX + scroll.x;
	var startY = event.clientY + scroll.y;

	//ドラッグされる要素の初期位置(ドキュメント座標)
	//elementToDragは絶対位置指定されるので、offsetParentがドキュメントボディと想定している
	var origX = elementToDrag.offsetLeft;
	var origY = elementToDrag.offsetTop;

	//mousedownイベントと要素の左上角の距離を計算する
	//マウスが移動している間、この距離が維持されるようにする
	var deltaX = startX - origX;
	var deltaY = startY - origY;

	//mousemoveイベントとmouseupイベント用のイベントハンドラを登録する
	if (document.addEventListener) {	//標準イベントモデル
		//キャプチャリングイベントハンドラをドキュメントに登録する
		document.addEventListener("mousemove", moveHandler, true);
		document.addEventListener("mouseup", upHandler, true);

	} else if(document.attachEvent) {	//IE5～8用のIEイベントモデル
		//IEイベントモデルでは、イベントをキャプチャしたい要素に対して
		//setCapture()を呼び出すことで、イベントをキャプチャする
		elementToDrag.setCapture();
		elementToDrag.attachEvent("onmousemove", moveHandler);
		elementToDrag.attachEvent("onmouseup", upHandler);
		//マウスキャプチャを失った場合は、mouseupとして処理する
		elementToDrag.attachEvent("onlosecapture", upHandler);
	}

	//このイベントは処理が完了したので、ほかの要素が処理しないようにする
	if (event.stopPropagetion) event.stopPropagetion();	//標準モデル
	else event.cancelBubble = true;	//IE

	//デフォルトの動作を抑止する
	if (event.preventDefault) event.preventDefault();	//標準モデル
	else event.returnValue = false;	//IE

	//要素がドラッグされている間、mosemoveイベントをキャプチャする
	//ハンドラ。要素の移動処理を行う
	function moveHandler(e) {
		if (!e) e = window.event;	//IEイベントモデル

		//要素を現在のマウス位置まで移動する
		//スクロールバーの位置や、
		//最初のマウスクリック時のオフセットを計算に入れて調整する必要がある
		var scroll = getScrollOffsets();
		elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";
		elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px";

		//このイベントをほかの場所で処理されないようにする
		if (e.stopPropagetion) e.stopPropagetion();
		else e.cancelBubble = true;
	}

	//ドラッグの最後で発生するmouseupイベントをキャプチャするハンドラ
	function upHandler(e) {
		if (!e) e = window.event;	//IEイベントモデル

		//キャプチャリングイベントハンドラを登録解除する
		if (document.removeEventListener) {	//DOMイベントモデル
			document.removeEventListener("onmouseup", upHandler, true);
			document.removeEventListener("onmousemove", moveHandler, true);
		} else if (document.detachEvent) {	//IE5以降のイベントモデル
			elementToDrag.detachEvent("onlosecapture", upHandler);
			elementToDrag.detachEvent("onmouseup", upHandler);
			elementToDrag.detachEvent("onmousemove", moveHandler);
			elementToDrag.releaseCapture();
		}

		//これ以上、イベントを伝播しないようにする
		if (e.stopPropagetion) e.stopPropagetion();	//標準モデル
		else e.cancelBubble = true;	//IE
	}
}

// 現在のスクロールバーの位置を、オブジェクトのx,yプロパティに格納して返す
function getScrollOffsets(w) {
	//指定したウィンドウ(引数なしの場合は現在のウィンドウ)を使う
	w = w || window;

	//以下は、すべてのブラウザ(IE8以前を除く)で動作する
	if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset};

	//標準モードのIE用(任意のブラウザ用)
	var d = w.document;
	if (document.compatMode == "CSS1Compat")
		return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};

	//クァークスモードのブラウザ用
	return {x: d.body.scrollLeft, y: d.body.scrollTop };
}

// ドキュメントの読み込みが完了したときに実行する関数fを登録する
// ドキュメントが読み込み済みの場合は、できるだけ早く非同期で呼び出す
function onLoad(f) {
	if(onLoad.loaded) 		//ドキュメントが読み込み済みであれば、
		window.setTimeout(f, 0); 	//できるだけ早く ｆ が実行されるようにする
	else if (window.addEventListener) 	//イベント登録用の標準メソッド
		window.addEventListener("load", f, false);
	else if (window.attachEvent) 			//IE8以前ではこのメソッドを使う
		window.attachEvent("onload", f);
}

// ドキュメントの読み込みが終わっていないことを示すフラグを設定する。
onLoad.loaded = false;
// そして、ドキュメントが読み込まれたときにフラグを設定する関数を登録する。
onLoad(function(){ onLoad.loaded = true; });


/*
*whenReady()に関数を引数で渡す
*ドキュメントが解釈され操作可能になったときに、
*この関数がドキュメントのメソッドとして呼び出される
*登録した関数は、
*DOMContentLoaded、readyStatechange、loadイベントが発生したときに呼び出される
*ドキュメントが準備でき、すべての関数が呼び出されていたら、
*whenReady()に渡された関数がすぐに呼び出される
*/
var whenReady = (function() {	//この関数はwhenReady()関数を返す
	var funcs = [];	//イベントが発生したときに実行する関数
	var ready = false;	//イベントハンドラが呼び出されたときにtrueに変更する

	//ドキュメントの準備ができたときに呼び出されるイベントハンドラ
	function handler(e) {
		//一度実行していれば、すぐに戻る
		if(ready) return;

		//readystatechangeイベントの場合で、状態が「complete」以外の状態に
		//変わった場合は、まだ準備ができていない
		if(e.type === "readystatechange" && document.readyState !== "complete")
			return;

		//登録された関数をすべて実行する
		//毎回funcs.lengthを調べていることに注意
		//ある関数を呼び出したときに、されに別の関数が登録されている場合を考慮している
		for (var i = 0; i < funcs.length; i++) {
			funcs[i].call(document);
		}

		//ここで、readyフラグをtrueに設定し、関数を忘れる
		ready = true;
		funcs = null;
	}

	//受信したいイベント用にハンドラを登録する
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", handler, false);
		document.addEventListener("readystatechange", handler, false);
		window.addEventListener("load", handler, false);
	} else if(document.attachEvent) {
		document.attachEvent("onreadystatechange", handler);
		window.attachEvent("onload", handler);
	}

	//whenReady関数を返す
	return function whenReady(f) {
		if (ready) f.call(document);	//すでに準備ができていたら、実行するだけ
		else funcs.push(f);	//まだ準備できていない場合は、キューに入れる
	}
}())

function cancelHandler(event) {
	var event = event || window.event;

	イベント処理

	if (event.preventDefault) event.preventDefault();
	if (event.returnValue) event.returnValue = false;
	return false;
}