JS : ドットエディタのクロスブラウジング

最大の違いは「イベント」の扱い

これは元々仕様が違うのですが、IE が window オブジェクトの中にグローバルで参照できる event オブジェクトを置いて、システムがそこに情報を設定するのに対して、Mozilla では、イベントが起きたエレメントでのみ参照できる eventオブジェクトがあり、function に引数で渡して使うというところです。内部のプロパティも違うので全く二通りの書き方をする必要があります

<HEAD>
<STYLE type="text/css">

TD {
	width:20px;
	height:20px;
	background-color:#ffffff;
}

TABLE {
	background-color:#000000;
}

</STYLE>

<SCRIPT type="text/javascript">

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
var mouseFlg = 0;
var curColor = "#000000";

function test(ev) {

	if (userAgent.indexOf("msie") > -1) {
		if ( event.button == 1 ) {
			event.srcElement.style.backgroundColor = curColor;
		}
	}
	else {
		if ( mouseFlg == 1 ) {
			ev.currentTarget.style.backgroundColor = curColor;
		}
	}

}

function cancelDrag( ev ) {

	if (userAgent.indexOf("msie") > -1) {
		event.returnValue = false;
	}
	else {
		ev.preventDefault();
	}
}
</SCRIPT>
<HEAD>

<BODY onMousedown='mouseFlg=1' onMouseup='mouseFlg=0'>

<TABLE cellspacing=1>
<SCRIPT type="text/javascript">
for( row = 1; row <= 20; row++ ) {
	document.write("<tr>");
	for( i = 1; i <= 20; i++ ) {
		document.write("<TD " +
			" onMousemove='test(event)'"+
			" onMousedown='mouseFlg=1;test(event)'"+
			" ondragstart='cancelDrag(event)' ></TD>");
	}
	document.write("</tr>");
}
</SCRIPT>
</TABLE>

まず、IE の場合、イベントの元となるエレメントが srcElement であるのに対して　Mozilla では currentTarget となり。この処理の最も重要な部分となる、「ドラッグ開始イベント」のキャンセルも全く違います。

IE : event.returnValue = false;
Mozilla : ev.preventDefault();

あと、マウスの状態を Mozilla では特に知る事ができなかったので( というか、Mozilla はそもそも正式で信頼できる日本語マニュアルを見つける事ができていません )フラグを使ってドラッグ状態をチェックしています。

これに関して、BODY と TD と両方でセットしているのは、TD の外から入った時も対象とするようにする為で、TD 内で行っているのは、こちらのイベントが先なので、クリックした時に色を塗れるようにする為です

※ BODY のイベントは実際は、イベントの追加メソッドで追加するべきです。
関連する記事
WEB ページの onLoad イベントのまとめ