More than 3 years have passed since last update.

子要素をクリックした時、親要素の影響を受けないようにする

Posted at 2022-03-12

カード全体がリンクになっていて、その中にさらに別のリンクを追加したいとき

作りたいもの

白枠は画像とか入れる想定で下部に別URLのリンクを入れたい。

細かい動作として
・aタグをホバーした時にはカード全体のスタイルを当てたくない。
・カード全体をクリックした時と、aタグをクリックした時は別のリンクに飛ばしたい。

See the Pen link in link by sora (@sora888) on CodePen.

見た目通りに普通に書いたら下記な感じになるかと思います。
ただ今回は、ピンクカード全体にonClickのイベントが走るようにしており、
この中にaタグを入れてしまうとカード全体のonClickのイベントがよばれてしまいます。

カード全体をクリックした時と、aタグをクリックした時は別のリンクに飛ばしたい。この要件を満たせない。。。。

<div id="outer">
 <div class="text">
   texttexttext
   <br/>texttexttext
  </div>
 <a href="">link</a>
</div>

aタグにはカード全体のonClickのイベントは当てたくないので、一度aタグをカード外に移動させます。

<a href="">link</a>
<div id="outer">
 <div class="text">
   texttexttext
   <br/>texttexttext
  </div>
</div>

これでaタグを独立させて、
#outerの影響を受けないようにします。

あとはスタイル調整していきます。

#outer{
position:relative;
}

カード全体を支点としてaタグを配置したいので position:relative;
あとはaタグの位置を調整していきます。

a{
  position:absolute;
  top:200px;
  left:150px;
  z-index:1;
}

今回はカード全体をdivタグにしてonclickイベントで別リンクに飛ばすよう作っていますが、
カード全体をaタグにして中の要素にjs使ってもいけると思います。
個人的には親要素がdivの方が見やすかったです。