[jQuery]ブラウザ幅でjs処理を変える手引

そういう組み方をするなら為になるかもしれないサンプル

$(function(){
	$('header').on('mouseover',function(){
		if($('header#pc').length){
			
		}
	}).on('mouseleave',function(){
		if($('header#pc').length){
			
		}
	}).on('click',function(){
		if($('header#sp').length){
			
		}
	});
});
$(window).on('load resize', function(){
	var w = window.innerWidth;
	if (w < 896) {
		$('header').attr('id','sp');
	}else{
		$('header').attr('id','pc');
	}
});

説明

ブラウザ幅を読み込み時もしくはリサイズ時に読み取って、指定した幅によってidを振り分ける(pcとsp)。
まあclassでもいいんだけど。

で、ここからが肝。

ifで振り分けた中でmouseover等の処理はできないので以下の書き方は間違いになる。処理できないっていうか、なんか安定しなかったりしてオススメしない。

$(function(){
	if($('header#pc').length){
		$('header').on('mouseover',function(){
		
		});
	}
});

「#pcだったらmouseover時にどうのこうの」はダメ。
「mouseover時に対象が#pcを持ってたらどうのこうの」って感じに書く。

大正解じゃなくて最適解という話

ブラウザ幅を取得して振り分ける部分のif内で書いてもぶっちゃけ動く。
その中なら属性をつけなくていいからhtmlがごちゃごちゃしない。

問題ないっちゃないんだけど、同じ要素に対して2箇所でそれぞれ書き始めるってのが発生するのであとから見返すときに辛くなるし、何よりもjsの読み込まれる優先順位がそんなに高くない書き出しだから、ロード真っ最中にデザインが瞬間的におかしくなったりとか、美しさとか実用性で考えたらイマイチ。

コメント

タイトルとURLをコピーしました