【jQuery】マウスオーバーでポップアップを表示する際の注意(IE対策)

プログラミング

あるエリアをマウスオーバーするとボックスがポップアップで
表示される処理で、ボックスの位置合わせをするとき、
基準となるエリアの右や左ではなく、下に表示するのであれば、
X座標・Y座標を計算して設定するのではなく、appendで追加して
やれば簡単に位置合わせできるじゃないかと考えました。





<div id="親"><!--見えない-->

	<div id="子"></div>

</div>

<div id="ポップアップ"></div><!--見えない-->



<div id="親"><!--見えない-->

	<div id="子"></div>

	<div id="ポップアップ"></div><!--appendされた-->

</div>
1行で済んで、お手軽です。


【JavaScript】

$(親).mouseover(function(){

	 $(this).append(ポップアップ);

});
しかし、これではIEで問題があります。
ポップアップにリンクやonclickなどを設定している場合、
それが全く働いてくれません。


そこで、その対策として3つの方法が考えられます。


  1. 素直にCSSのtop, leftを指定して位置を調整する

    
$(親).mouseover(function(){
    
	var offset = $(this).offset();
    
	$(ポップアップ).css({
    
	 	'top':parseInt(offset.top, 10) + $(this).height(),
    
		'left':parseInt(offset.left, 10)
    
	});
    
	$(ポップアップ).show();
    
});

  2. チェック用変数を使って、重ねてappendするのを防ぐ

    
var check = false;
    
$(親).mouseover(function(){
    
	if(check) return;
    
	$(this).append($('#pop3'));
    
	$('#pop3').show();
    
	check = true;
    
});

  3. ポップアップのmouseover時ににstopPropagationを設定

    
$(親).mouseover(function(){
    
	//ここは最初のコードと同じ
    
	$(this).append($(ポップアップ));
    
	$(ポップアップ).show();
    
});
    
$(ポップアップ).mouseover(function(e){
    
	e.stopPropagation();
    
});

【検証用ページ】
http://www.usamimi.info/~sutara/sample/jq_popup.php


個人的には、stopPropagationを使う方法がお手軽で
いいのではないかと思いました。