クロスブラウジングなクリックイベント

  SPAN



ここをクリックすると alert

ここもクリックすると alert

ここもクリックすると alert

ここはクリック後ページ内ジャンプ

これだとクリック後ページ先頭にジャンプ


  
<SCRIPT language=JavaScript>
function ChangeAtt( obj, sColor, sType ) {
	obj.style.color = sColor;
	obj.style.textDecoration = sType;
}

function DispTagName( e ) {
	var text;
	var range;

	if ( document.all ) {
		text = window.event.srcElement.innerText
	}
	else {
		range = document.createRange();
		range.selectNode( e.target );
		text = range.toString();
	}

	alert( text );

}

function DispTagName2( obj ) {
	var text;
	var range;

	if ( document.all ) {
		text = obj.innerText
	}
	else {
		range = document.createRange();
		range.selectNode( obj );
		text = range.toString();
	}

	alert( text );

}

</SCRIPT>

<!-- // 汎用的なクリックイベントの作成方法 -->

<SPAN id="target"
	style='cursor:pointer'
	onMouseover='ChangeAtt(this,"#0000FF","underline")'
	onMouseout='ChangeAtt(this,"#000000","none")'
>ここをクリックすると alert</SPAN>

<br><br>

<!-- // javascript:を使用した呼び出し。 this は使用できない -->

<A id="me" href="javascript:DispTagName2(document.getElementById('me'))">
ここもクリックすると alert</A>

<br><br>

<!-- // javascript:をダミー化して、呼び出しを onClick で行うと this が使用できる -->

<A href="javascript://" onClick="DispTagName2(this)">ここもクリックすると alert</A>

<br><br>

<!-- // href の機能をそのままにして onClick で呼び出しするので、ジャンプ処理が有効になる -->

<A href="#ttl2" onClick="DispTagName2(this)">ここはクリック後ページ内ジャンプ</A>

<br><br>

<!-- // href の機能をそのままにして onClick で呼び出し後 # で先頭にジャンプさせる -->

<A href="#" onClick="DispTagName2(this)">これだとクリック後ページ先頭にジャンプ</A>

<br><br>

<SCRIPT language=JavaScript>
document.getElementById("target").onclick=DispTagName
</SCRIPT>
  



  ここにジャンプ











  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ