JavaScript(jQuery)のクリックイベントについて質問です。


すでにクリックイベントが設定されたBOX(B)の外側のBOX(A)にクリックイベントを
設定したいと考えています。Aにイベントを設定するとBのイベントが無効になり
Aのイベントのみが発火して困っています。
↓こんな感じのボックス配置のときです
http://www.fastpic.jp/images/810/0011082553.gif
BOX(B)をさけてイベントを設定することもできますが数が多いのと
メンテナンス性がよくないので他の方法でできないでしょうか?
できればjQuery記法でお願いします。

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/10/04 23:17:22
  • 終了:2011/10/06 01:18:42

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262011/10/05 00:27:55

ポイント400pt

ボックスBのハンドラで event.stopPropagation() を実行してないでしょうか?

何もしなければ通常は内側でクリックイベントが実行されてもイベントは外側の要素にバブリングしてきて外側のボックスAのハンドラも実行されるはずです。

そうならないのは内側のハンドラで event.stopPropagation() が実行されてるからだと思います。

もしボックスAのハンドラでそれが必須でないのであれば、試しに stopPropagation() が呼ばれていないか探してコメントアウトしてみててください。

その他の回答(1件)

id:y-kawaz No.1

y-kawaz回答回数1421ベストアンサー獲得回数2262011/10/05 00:27:55ここでベストアンサー

ポイント400pt

ボックスBのハンドラで event.stopPropagation() を実行してないでしょうか?

何もしなければ通常は内側でクリックイベントが実行されてもイベントは外側の要素にバブリングしてきて外側のボックスAのハンドラも実行されるはずです。

そうならないのは内側のハンドラで event.stopPropagation() が実行されてるからだと思います。

もしボックスAのハンドラでそれが必須でないのであれば、試しに stopPropagation() が呼ばれていないか探してコメントアウトしてみててください。

id:a-kuma3 No.2

a-kuma3回答回数4584ベストアンサー獲得回数19242011/10/05 01:03:53

ポイント100pt

No.1 の方の補足。

もし、IE を使ってるようであれば、

event.cancelBubble = true

を探してみましょう。

  • id:masculine
    ボックスBのイベントにevent.stopPropagation()を設定しバブリングを止めると
    Aのイベントが発生せずにBのみイベントがとれました。ベストアンサーの方の回答が参考になりました。ありがとうございます。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>stopPropagation test</title>

    <style>
    .aa {
    width:600px;
    background:#eee;
    height:300px;
    margin:50px auto;
    padding:30px;
    }
    .bb,.cc {
    margin:50px;
    width:100px;
    height:80px;
    background:#bbb;
    }
    </style>
    <script src="jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(function() {
    $('.aa').click(function(event){
    alert("aa");
    //alert aa
    });

    $('.bb').click(function(event){
    event.stopPropagation();
    alert("bb");
    //alert bb
    });

    $('.cc').click(function(event){
    alert("cc");
    //alert cc alert aa
    });

    });

    </script>

    </head>

    <body>

    <div class="aa">
    contentA
    <div class="bb">contentB</div>
    <div class="cc">contentC</div>
    </div>

    </body>
    </html>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません