2012-02-06 3 views
1

(ちょっと)のクローズボタン(赤色)のモックアップでヘッダーを添付しました。閉じるボタン(ヘッダーと重なる部分)をクリックすると何も起こりません。あなたはその問題に関する正しい解決法に関するアドバイスをお願いできますか?なぜクリックイベントが伝搬していないのですか?

HTML:

<div id="my_body" style="background:rgba(0, 0, 0, 0.6);padding:10px;"> 
    <div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 
    <div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
    <div id="pic_area" style="border:2px solid #b3b3b3;margin-top:10px"> 
     <img id="pic" src="http://never.mind.which.pic.com" > 
    </div> 
</div> 

JS:

$("#cls_btn").bind("click", function() { 
    alert("clicked!"); 

    return true; 
}); 

JSFiddle:http://jsfiddle.net/JuGx9/

ありがとう!

答えて

1

あなたの 'my​​_header' それをカバーしています。 "my_header" DIV "はcls_btn" のdivを重ねている

<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 
+0

なぜラインオーダーが問題なのですか? – BreakPhreak

+0

私は、*正しい*要素の順序を意味します - それは100%ポータブルブラウザ間でですか? – BreakPhreak

+1

イベント火災の上部をクリックすると別のdivがボタンをカバーしているときは、ボタンをクリックするのではなく、2つ目のdivをクリックします。だから私は行を変更すると、ボタンは2番目のdivの上にあり、それはあなたのクリックを得ることができます。 'my_header'を右に移動してボタンを覆わないようにすることもできます。 – Hadas

3

この要素(<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>)は、同じ領域を占めているようで、#cls_btnではなくclickイベントを取っているようです。 999の値を持つz-index CSSプロパティを適用すると、問題が修正されます。

Working DEMO

+0

ありがとう! 'z-index 'の助けを借りなければ解決する方法はありますか? *ちょっと興味があるんだけど*。 – BreakPhreak

関連する問題