<a>タグを入れ子のように挙動させながら、そのテキストを選択できるようにしたい

Question

###実現したいこと
下図のように<a>タグを入れ子にせずに、入れ子にしたかのような機能にしたいです。
しかし、難しい条件がございます。

###条件
条件として次の機能1から4を求めておりまして、各<a>タグは通常の<a>タグと同じ挙動での実現を求めています。（テキストを選択できないなどの挙動の違いがないようにしたいです。）

機能1. カード全体のクリックで「画像タイトル」のリンクへ飛ぶこと
機能2.「著者名」「タグ」のクリックでそれぞれのリンクへ飛ぶこと
機能3. aタグの右クリックメニュー（新しいタブで開く等）を出せること
機能4. テキストをカーソルで選択できること（コピペできないと使いにくいため）

###実装した機能

機能123をCSSで実装しました。
「画像タイトル」のリンク範囲をCSSの:afterで.card全体に伸ばしたわけです。
（これは昨日の質問でご回答いただいた方法です。）

しかしこれによって機能4ができなくなりました。
テキスト選択しようとすると、:afterになっているためにドラッグが発生してしまいます。

そこで下記のJavaScriptを書きました。
テキスト選択の際はis_drag = trueとなり、先のCSSの:afterを解除したという感じになっています。

###発生している問題
これでいけるとかと思いましたが、テキスト選択のタイミングが次のように遅れます。

読み込み終了→テキスト選択→できない→もう一度テキスト選択→できる

このように、一度目の選択ができないのです。

###ソースコード
次のソースコードを実行できるjsfiddle がありますので、よろしければお試しください。

<div class="card is_arrow_link">
  <img src="https://placehold.jp/250x200.png">
  <div class="card-body">
    <h3 class="card-title">
      <a href="example.com" class="stretched-link">画像タイトル</a>
    </h3>    
    <p class="card-author">
      <a href="#author">著者名：ふかみ</a>
    </p>
    <p class="card-tag">
      <a href="#tags">タグ　：夜景・ビル・綺麗</a>
    </p> 
  </div>
</div>

.card {
  position: relative;
  width: 250px;
  border: 1px solid gray;
  padding: 5px;
  margin: 0 0 100px 0;
}

.card.is_arrow_link .stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; 
  content: "";
  background-color: transparent;
}

.card-author > a, .card-tag > a {
  position: relative;
  z-index: 2;
}

a {
  line-height: 2;
  display: inline-block;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h3,p{
  margin: 0;
}

// これがtrueのときCSSの:afterを解除して、テキスト選択できるようにしました
var is_drag = false;

// mousedown
$(document).on('mousedown','.card', function(){
	console.log('mousedown');
	console.log('mousedown is_drag =' ,is_drag);  
	$(this).addClass('is_arrow_link');
	is_drag = true;
});

// mouseup
$(document).on('mouseup','.card', function(){
	console.log('mouseup');
	is_drag = false;
	//$(this).addClass('is_arrow_link');
});

// mousemove
$(document).on('mousemove', function() {
	console.log('mousemove');  
	// drag
	if (is_drag === true) {
		console.log('drag');  
		$('.card').removeClass('is_arrow_link');          
	}
});

※.cardは.append()されるため、$(document).on();の方法で書いています。
###試したこと
素人試行錯誤で恐縮ですが、上記JavaScriptのような「ドラッグの検出」をやめて、「長押しの検出」というアプローチを試してみました。

「長押しの検出」はライブラリ「longpress 」を用いて以下前半部分にコピペしています。

しかしこちらも「ドラッグの検出」と同様のタイミングのズレが生じてしまいました。

/*-------------------------------------------------
 
  以下は ライブラリ longpress です
  
--------------------------------------------------*/

/**
 * Longpress is a jQuery plugin that makes it easy to support long press
 * events on mobile devices and desktop borwsers.
 *
 * @name longpress
 * @version 0.1.2
 * @requires jQuery v1.2.3+
 * @author Vaidik Kapoor
 * @license MIT License - http://www.opensource.org/licenses/mit-license.php
 *
 * For usage and examples, check out the README at:
 * http://github.com/vaidik/jquery-longpress/
 *
 * Copyright (c) 2008-2013, Vaidik Kapoor (kapoor [*dot*] vaidik -[at]- gmail [*dot*] com)
 */

(function($) {
    $.fn.longpress = function(longCallback, shortCallback, duration) {
        if (typeof duration === "undefined") {
            duration = 500;
        }

        return this.each(function() {
            var $this = $(this);

            // to keep track of how long something was pressed
            var mouse_down_time;
            var timeout;

            // mousedown or touchstart callback
            function mousedown_callback(e) {
                mouse_down_time = new Date().getTime();
                var context = $(this);

                // set a timeout to call the longpress callback when time elapses
                timeout = setTimeout(function() {
                    if (typeof longCallback === "function") {
                        longCallback.call(context, e);
                    } else {
                        $.error('Callback required for long press. You provided: ' + typeof longCallback);
                    }
                }, duration);
            }

            // mouseup or touchend callback
            function mouseup_callback(e) {
                var press_time = new Date().getTime() - mouse_down_time;
                if (press_time < duration) {
                    // cancel the timeout
                    clearTimeout(timeout);

                    // call the shortCallback if provided
                    if (typeof shortCallback === "function") {
                        shortCallback.call($(this), e);
                    } else if (typeof shortCallback === "undefined") {
                        ;
                    } else {
                        $.error('Optional callback for short press should be a function.');
                    }
                }
            }

            // cancel long press event if the finger or mouse was moved
            function move_callback(e) {
                clearTimeout(timeout);
            }

            // Browser Support
            $this.on('mousedown', mousedown_callback);
            $this.on('mouseup', mouseup_callback);
            $this.on('mousemove', move_callback);

            // Mobile Support
            $this.on('touchstart', mousedown_callback);
            $this.on('touchend', mouseup_callback);
            $this.on('touchmove', move_callback);
        });
    };
}(jQuery));


/*-------------------------------------------------
 
  以下が自作コードです
  
--------------------------------------------------*/

$('.card').longpress(function(e) {
	// 長押しの場合
	console.log('longpress');
	$(this).removeClass('is_arrow_link');
}, 
function(){
	// 長押し期間以内に離した場合（普通のクリック）
	console.log('click');
	$(this).addClass('is_arrow_link');
}, 100 ); // 長押し期間

Comments

[hatena19]

> 各<a>タグは通常の<a>タグと同じ挙動での実現を求めています。

通常の<a>タグ上にマウスカーソルを置いた状態ではテキスト選択はできません。
リンク範囲外からマウスドラッグすれば選択はできますが。

> 尚、aタグの中でaタグを利用する方法というブログ記事に次の3つの方法があります。

> 昨日の質問でご回答いただいた方法

上記のどれも同じ挙動だと思いますが。
（Chromeでの動作確認）

[kurazushi]

>リンク範囲外からマウスドラッグすれば選択はできますが。
すみませんリンク範囲外からでしたね。ご指摘ありがとうございます。まぁスマホも射程ということでご容赦ください。

>上記どれも同じ挙動だと思いますが。
失礼いたしました。削除しておきます。

[hatena19]

なるほど、<a>タグの通常の挙動以外のことを実現したいということですね。
難しそうですね。

[kurazushi]

<a>タグ１つなら「テキスト選択できるのが通常の挙動」ですが、今回のように入れ子のような形ですと「テキスト選択できないのが通常の挙動」となるようで…
入れ子のような形であっても選択できた方が便利と思うのですが、厄介な仕様ですよね。
あれから丸一日かけてもできず難航しています。

Answer 1

どーでしょうかね……
もしかしたら実現したい内容の意図を私が理解できていないかもしれませんが……

<div class="card">
  <img src="https://placehold.jp/250x200.png">
  <div class="card-body">
    <h3 class="card-title">
      <a href="#foo" class="stretched-link">画像タイトル</a>
    </h3>    
    <p class="card-author">
      <a href="#author">著者名：ふかみ</a>
    </p>
    <p class="card-tag">
      <a href="#tags">タグ　：夜景・ビル・綺麗</a>
    </p> 
  </div>
</div>

.card {
  position: relative;
  width: 250px;
  border: 1px solid gray;
  padding: 5px;
  margin: 0 0 100px 0;
}

.card-author > a, .card-tag > a {
  position: relative;
  z-index: 2;
}

a {
  line-height: 2;
  display: inline-block;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h3,p{
  margin: 0;
}

const threshold = 150; // ms

const assignEvent = card => {
  // eventの順番は mousedown > mouseup > click

  card.addEventListener('mousedown', evt => {
    // mousedown の時間を保持
    card.dataset.clickBegan = (new Date()).getTime();
  });

  card.addEventListener('mouseup', evt => {
    const anchorsParentClass = ['card-title', 'card-author', 'card-tag'];

    // mouseup した時間が mousedown の thresholdミリ秒以内なら、クリックとみなす
    const clickedMilliseconds = (new Date()).getTime() - card.dataset.clickBegan;
    const isClick = clickedMilliseconds < threshold;

    // 前回の判定のときに保持させていた、クリックを許すかどうかの値を削除する
    [...card.querySelectorAll(`.${anchorsParentClass.join(' > a, .')} > a`)].forEach(link => {
      delete link.dataset.isDisabled;
    });

    // cardの中のどの要素が実際クリックされたのかを判定
    // 動作させたいリンクは .card-title, .card-author, .card-tag のいずれかの子要素
    if(anchorsParentClass.indexOf(evt.target.parentNode.className) !== -1) {
      // このリンクを動作させるかどうか保持させる
      evt.target.dataset.isDisabled = !isClick;
      return;
    }

    // リンク以外の場所でマウスが開放されて、かつクリックとみなす動作だった場合は
    // .card-title > a を発火させる
    if(isClick) {
      card.querySelector('.card-title > a').click();
    }
  });

  // aタグのクリックイベントをフックする。ここにたどり着いた時点ですでに mouseup の処理は
  // 終わっているので、 isDisabled に値が入っているはず
  [...card.getElementsByTagName('a')].forEach(a => {
    a.addEventListener('click', evt => {
      console.log('clicked', evt.currentTarget);
      if(a.dataset.isDisabled === 'true') {
        evt.preventDefault();
        console.log('prevented');
      }
    });
  });
}

[...document.querySelectorAll('.card')].forEach(card => {
  assignEvent(card);
});

Oct 13, 2020 11:40AM - コメント (仕様変更) を受けての追記

<div class="card">
  <a href="#foo" class="stretched-link">
    <img src="https://placehold.jp/250x200.png">
    <div class="card-body">
      <span role="heading" class="card-title">画像タイトル</span>
      <span class="card-author" data-href="#author">著者名：ふかみ</span>
      <span class="card-tag" data-href="#tags">タグ　：夜景・ビル・綺麗</span>
    </div>
  </a>
</div>

.card {
  position: relative;
  width: 250px;
  border: 1px solid gray;
  padding: 5px;
  margin: 0 0 100px 0;
}
.card a {
  text-decoration: none;
}
.card a:active {
  color: rgb(238, 0, 0);
  color: -webkit-link;
}
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.card-body > span {
  line-height: 2;
}
.card-body > span[role="heading"] {
  font-size: 1.17em;
  font-weight: bold;
}
.card-body > span:hover {
  text-decoration: underline;
}
.card-body > span.clicking {
  color: rgb(238, 0, 0);
  color: -webkit-activelink;
}

const threshold = 150; // ms

/**
 * .card-body > [data-href] の要素にマウスが乗ったときに、ベースとなるaタグのhref属性値を書き換える
 * @param Element baseAnchor ベースとなるaタグ
 * @param String  customHref リンク先
 */
const onMouseOverCustomLinkElement = (baseAnchor, customHref) => {
  baseAnchor.dataset.originalHref = baseAnchor.href;
  baseAnchor.href = customHref;
};

/**
 * .card-body > [data-href] の要素からマウスが外れたときに、ベースとなるaタグのhref属性値を元に戻す
 * @param Element baseAnchor ベースとなるaタグ
 */
const onMouseOutCustomLinkElement = baseAnchor => {
  baseAnchor.href = baseAnchor.dataset.originalHref;
  delete baseAnchor.dataset.originalHref;
};

/**
 * .card-body > span の要素がクリックされたときに、aタグがクリックされたときと同様の色になるようにする
 * @param Element customLinkSpan .card-body > span の要素
 */
const onMouseDownCustomLinkElement = customLinkSpan => {
  customLinkSpan.classList.add('clicking');
};

/**
 * なんらかの場所でクリック解除されたときに、.card-body > span の要素が、
 * aタグがクリック解除されたときと同様の色になるようにする
 */
const onMouseUpDocumentBody = () => {
  [...document.querySelectorAll('.card-body > span')].forEach(span => span.classList.remove('clicking'));
};

/**
 * card の中でクリックされたとき、通常のクリックかそうでないか
 * (ロングタップやドラッグ) を判定するために、クリック開始時刻を保持する
 * @param Element card
 */
const onMouseDownCard = card => {
  card.dataset.clickBegan = (new Date()).getTime();
};

/**
 * card の中でクリック解除されたとき、通常のクリックでないならリンク先への遷移を止める
 * @param Element card
 */
const onClickCard = (card, evt) => {
  // mouseup した時間が mousedown の thresholdミリ秒以内なら、クリックとみなす
  const clickedMilliseconds = (new Date()).getTime() - card.dataset.clickBegan;
  const isClick = clickedMilliseconds < threshold;
  if(!isClick) {
    evt.preventDefault();
    console.log('prevented');
  }
};

const assignEvent = card => {
  // eventの順番は mousedown > mouseup > click

  // リンク先を変化させるイベントを登録
  [...card.querySelectorAll('.card-body > [data-href]')].forEach(span => {
    const a = card.querySelector(':scope > a');
    span.addEventListener('mouseover', () => {
      onMouseOverCustomLinkElement(a, span.dataset.href);
    });
    span.addEventListener('mouseout', () => {
      onMouseOutCustomLinkElement(a);
    });
  });

  // .card-body > span にリンクのようなスタイルを適用するイベントを登録
  [...card.querySelectorAll('.card-body > *')].forEach(span => {
    span.addEventListener('mousedown', () => {
      onMouseDownCustomLinkElement(span);
    });
  });

  // カード全体のクリック関連イベントを登録
  card.addEventListener('mousedown', () => {
    onMouseDownCard(card);
  });
  card.addEventListener('click', evt => {
    onClickCard(card, evt);
  });
}

[...document.querySelectorAll('.card')].forEach(card => {
  assignEvent(card);
});
document.body.addEventListener('mouseup', onMouseUpDocumentBody);

Comments

[kurazushi]

どうもありがとうございます。ほぼクリア出来ているように思えます。
テキスト選択はできますし、.cardをクリックしての「画像タイトル」へのリンクも効きました。

[kurazushi]

ただ誠に恐れ入りますが、どうやら「画像タイトル」のテキストを選択した状態につきまして、.cardをクリックしての「画像タイトル」へのリンクが効かなくなってしまいました。この場合は「prevented」がコンソールに出てしまいリンクできないようでした。

そして右クリック時のメニューにつきまして、「新しいタブで開く」でなく、「画像だけを表示」（または「名前を付けてページを保存」）のメニューとなってしまうようでした。

[thyda.eiqau]

> ただ誠に恐れ入りますが、どうやら「画像タイトル」のテキストを選択した状態につきまして、.cardをクリックしての「画像タイトル」へのリンクが効かなくなってしまいました。この場合は「prevented」がコンソールに出てしまいリンクできないようでした。
修正します。

> そして右クリック時のメニューにつきまして、「新しいタブで開く」などのリンクのメニューが表示できないようでした。
ブラウザは何ですか？

[kurazushi]

>修正します。
ご修正どうもありがとうございました！「prevented」の方につきましては無事解消致しました。

[kurazushi]

>ブラウザは何ですか？
ブラウザはFirefoxもChromeも同様に「新しいタブで開く」でなく、「画像だけを表示」（または「名前を付けてページを保存」）のメニューでした。

この問題に対しては、右クリックを「oncontextmenu」で判定して、.cardへの右クリックの場合はstretched-linkの右クリックを起動する。という機能でどうかと思ったのですが、左右のクリックを逆に設定しているマウスに対応できないので微妙でしょうか…？

[thyda.eiqau]

画像を右クリックしたときにもリンクを右クリックしたときと同じメニューを出してほしいという意味ですか？それは画像がaタグでくくられていないので無理ですよ。
機能3. aタグの右クリックメニュー（新しいタブで開く等）を出せること
は満たしていると思います。画像はaタグの範囲外です。aタグを右クリックしたときには適切なメニューが出てきています。

機能1. カード全体のクリックで「画像タイトル」のリンクへ飛ぶこと
は、リンクに飛ぶことが条件なのであって、aタグの機能をすべて満たすこととは記載がありませんので、こちらも満たしていると思うのですが……

[kurazushi]

>機能3. aタグの右クリックメニュー（新しいタブで開く等）を出せること
は、質問時のaタグ範囲（after含む）を考えていましたが、そのように記載していませんから伝わるはずもないですね。申し訳ございませんでした。

>画像はaタグの範囲外です。aタグを右クリックしたときには適切なメニューが出てきています。
画像左クリックで「画像タイトル」のリンクにとび、右クリックではそのリンクに飛ぶメニューが出ない。という不整合に納得がいかなかったのですが…、しかしその操作性の不整合は、仰る通り利便性の適切かもしれません。

さてこのたびの質問内容に対して間違いなく正鵠を射るご回答を頂いておりましたため、ベストアンサーとさせて頂きます。右クリックの件、混乱させてしまい申し訳ございませんでした。

[thyda.eiqau]

調整しました。

[kurazushi]

ありがとうございます。気づくのが遅くなりまして申し訳ございません！ご調整頂いているとは夢にも思いませんでした。
半ば諦めかけていたのですが、おかげ様でやる気を取り戻すことができました。最後まで手厚いご指導心より感謝申し上げます。