Nuxt(vue) 宗教上の理由でaタグを増やせない。それでもクリック範囲を増したい。そんな時はJSで無理やりクリック範囲を拡張する。

カードUIを実装する際、aタグを限られた範囲でしか使えない状況にも関わらず、クリック範囲は、aタグ以外の場所もクリッカブルにしたい時に使えるかもしれない。

（HTMLの構造上、aタグの疑似要素に出来ないので、JSでどうにかするしかない場合に使えるかも。）

ゴール

下記画像のメイン部分を押下した場合でも、テキストリンクと同じ挙動をさせる。

コード

vue

<template>
  <article class="item">
    <div class="item-title">
      <a
        href="http://リンク先/"
        class="item-link"
        @click="alert"
        >
        テキストリンク
      </a>
    </div>
    <div class="item-body">
      <div class="item-main" @click="click">
        メイン部分<br>
        メイン部分<br>
        メイン部分<br>
        メイン部分
      </div>
    </div>
  </article>  
</template>

<script>
export default {
  methods: {
    click: function(event) { 
      event.target
        .closest('.item')
        .querySelector('.item-link')
        .click();
    },
  },
};
</script>

<style>
.item {
  position: relative;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  font-size: 13px;
  background: #fff;
  margin: 10px;
  overflow: hidden;
}
.item-title {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  min-height: 3.4rem;
  align-items: center;
}
.item-title a {
  display: block;
  padding: 10px;
}
.item-main{
  padding: 10px;
  -webkit-tap-highlight-color: rgba(41, 144, 208, 0.2);
  cursor: pointer;
  background-color: #eee;
}
</style>

その他

• DOM構造に依存した書き方なので、思わぬ動きをする可能性がある。
• 宗教上の都合を取っ払えるなら、そのほうが早い。