質問: 画像のように、クリック可能な領域の上に、クリック可能なボタンを配置したいと考えています。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/4dd077f904f6d996699bcc0ac541cdfe.png) 画像では、グレーの領域にonclick属性をつけ、その上にボタンを配置しているのですが ボタンをクリックしても、グレーの領域のclickとして反応してしまいます。 codepenにてサンプルコードを記載しました。 sampleCode どうぞ宜しくお願い致します。
回答: onclick属性はjQueryのonメソッドよりも先にキャプチャされるようなので、 button、labelともにjQueryのonメソッドで扱い、 buttonが子要素なので、`e.stopPropagation();`で親要素へのイベントバブリングを停止すれば良いかと思います。 サンプル