クリック可能な領域の上にある要素を処理する方法

Question

私はアコーディオンスタイルのコントロールを作成しました。私はできる限りアクセシブルでセマンティックなものにしようとしています。私は今はうまく動作していますが、その1つの側面は私はあまりよく分かりません。何らかの理由で汚れているように感じる。それが汚れているかどうかは分かりません。

デモ：私のアコーディオンパネルにおいてhttp://jsfiddle.net/MygBf/

、全体のトップバー（ヘッダ）がクリック可能です。そして、各トップバーの右側にいくつかのキーワードボックスがあります。私がこれらのキーワードボックスを達成した方法は、それらを絶対的に（リンクの上に置く）配置していました。これは、あなたがもうバーをクリックできなかったデッドスペースを作成する悪影響をもたらしました。これを回避するために、私はキーワードボックスにonclick（リンクにある同じonclick）を与えました。これはすべて動作しますが、私が言ったように、ハッキー/汚いと感じます。

最後に、質問： ハック/汚いですか？もしそうなら、キーワードを達成する別の方法のアイデアはありますが、クリック可能な領域にはデッドスペースができませんか？

Answer 1

を、しかし、セレクタを個別に選択するのではなく、ヘッダ要素全体に変更しました。私はそれは大丈夫だと思うhttp://jsfiddle.net/Rm2Vn/

Answer 2

私はあなたが正確に何を意味するかわからないんだけど、boxesをクリックしたときに、ヘッダーonclickを解雇したくない場合は、この試してみてください。それはあなたが探しているまさにありません

$(".boxes").click(function(e){ 
    e.stopPropagation(); 
});