すでにクリックイベントが設定されたBOX（B）の外側のBOX（A）にクリックイベントを
設定したいと考えています。Aにイベントを設定するとBのイベントが無効になり
Aのイベントのみが発火して困っています。
↓こんな感じのボックス配置のときです
http://www.fastpic.jp/images/810/0011082553.gif
BOX（B）をさけてイベントを設定することもできますが数が多いのと
メンテナンス性がよくないので他の方法でできないでしょうか？
できればjQuery記法でお願いします。
No.1
1422
226
400pt
ボックスBのハンドラで event.stopPropagation() を実行してないでしょうか？
何もしなければ通常は内側でクリックイベントが実行されてもイベントは外側の要素にバブリングしてきて外側のボックスAのハンドラも実行されるはずです。
そうならないのは内側のハンドラで event.stopPropagation() が実行されてるからだと思います。
もしボックスAのハンドラでそれが必須でないのであれば、試しに stopPropagation() が呼ばれていないか探してコメントアウトしてみててください。
No.1
1422226
ここでベストアンサー
400pt
ボックスBのハンドラで event.stopPropagation() を実行してないでしょうか？
何もしなければ通常は内側でクリックイベントが実行されてもイベントは外側の要素にバブリングしてきて外側のボックスAのハンドラも実行されるはずです。
そうならないのは内側のハンドラで event.stopPropagation() が実行されてるからだと思います。
もしボックスAのハンドラでそれが必須でないのであれば、試しに stopPropagation() が呼ばれていないか探してコメントアウトしてみててください。
11
11
1
1
コメント（1件)
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>