クリックイベントが伝播していない理由

Question

クリックイベントが伝播していない理由

ヘッダーを（ちょっと）クローズボタン（赤色）のモックアップで接続しました。閉じるボタン（ヘッダーと重なる部分）をクリックすると何も起こりません。あなたはその問題に関する正しい解決法に関するアドバイスをお願いできますか？

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">
        
    </div>
</div>

JS：

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

    return true;
});

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

ありがとう！

1

追加された 06 2月 2012 〜で 12:49 著者 BreakPhreak

ビュー: 4

源

ru fr es pt de ar

3 答え

あなたの「my_header」はそれをカバーします。行を次のように変更します。

<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>

1

追加された 06 2月 2012 〜で 12:54 著者 Hadas

源

なぜライン注文が問題なの？

追加された 06 2月 2012 〜で 12:58, 著者 BreakPhreak, 源

つまり、正しい要素の順序は、ブラウザ全体で100％移植可能なのでしょうか？

追加された 06 2月 2012 〜で 01:00, 著者 BreakPhreak, 源

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

追加された 06 2月 2012 〜で 01:04, 著者 Hadas, 源

あなたは何の問題も見つけられません。

追加された 06 2月 2012 〜で 01:06, 著者 Hadas, 源

著者 Anthony Grist · Answer 1 · 2012-02-06T12:53Z

この要素（ <div id = "my_header" style = "position：relative;パディング：14px 26px 26px"> </div> ）は、同じスペースを占有しているようで、 #cls_btn divではなく 999 の値を持つ z-index CSSプロパティを適用すると、問題が修正されます。

Working DEMO

著者 Gabriel Llamas · Answer 2 · 2012-02-06T12:58Z

The "my_header" div is overlapping the "cls_btn" div. Look at this: http://jsfiddle.net/JuGx9/13/

Z-indexプロパティを使わずにこれを解決するには、divの順序を変更します...

http://jsfiddle.net/JuGx9/15/