iPhone/Androidなどwebkitのa:hover後、もとの状態に戻らないバグを修正したい

従来のロールオーバーは

1)cssのa⇔a:hoverで背景を切り替える
2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替える

の二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。

・ボタンの色が変わったまま戻らない
・ブラウザのバックボタンで戻った際に色がノーマル時に戻っていない
（ホバー時のままになっている）

これは現状、cssではどうにもならない。Javascriptでonclick系のイベントハンドラの代わりにontouch系を用い、下記のように対応するほかない。
最後のwindow.addEventListenerはブラウザのBackボタンで戻ったときにrolloverで変化した画像もしくは背景色が残っていた場合クリアするための記述。

function smartPhoneBGImgRollover() {
var a = document.getElementsByTagName("a");
	for(var i=0; i < a.length; i++) {
		a[i].style.backgroundPosition="left top";
		a[i].ontouchstart = function() {
			this.style.backgroundPosition="left bottom"
		};
		a[i].ontouchend = function() {
			this.style.backgroundPosition="left top"
		};
	}
}
function smartPhoneBGColorRollover() {
var b = document.getElementById("NaviType2");
	this.style.backgroundColor="transparent";
	this.style.backgroundPosition="right center";
	b.ontouchstart = function() {
		this.style.backgroundColor="#CCCCCC"};
	b.ontouchend = function() {
		this.style.backgroundColor="transparent"
		;}
	;}
if(window.addEventListener) {
	window.addEventListener("load", smartPhoneBGImgRollover, false);
	window.addEventListener("load", smartPhoneBGColorRollover, false);
}else if(window.attachEvent) {
	window.attachEvent("onload", smartPhoneBGImgRollover);
	window.attachEvent("onload", smartPhoneBGColorRollover());
}

しばらく経って似たような事例に遭遇した際は下記のように対応しました。
こっちのほうが良いです。
スマートフォン(iPhone/Android)でhover (rollover) を実装したい - dentaq log