<div id="cls_btn""> <div id="cls_btn""> <div id="cls_btn"" />

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

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

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

3 答え

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

Working DEMO

3
追加された
ありがとう! z-index の助けを借りなければ解決する方法はありますか? ちょっと好奇心
追加された 著者 BreakPhreak,

あなたの「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
追加された
なぜライン注文が問題なの?
追加された 著者 BreakPhreak,
つまり、正しい要素の順序は、ブラウザ全体で100%移植可能なのでしょうか?
追加された 著者 BreakPhreak,
あなたがイベントの火を上にクリックした場合。別のdivがボタンをカバーしているときは、ボタンをクリックするのではなく、2つ目のdivをクリックします。だから私は行を変更すると、ボタンは2番目のdivの上にあり、それはあなたのクリックを得ることができます。 'my_header'を右に移動してボタンを覆わないようにすることもできます。
追加された 著者 Hadas,
あなたは何の問題も見つけられません。
追加された 著者 Hadas,

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/

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript