回答編集履歴

コメント (仕様変更) を受けての追記

2020/10/13 02:40

投稿

thyda.eiqau

スコア2982

test CHANGED Viewed

@@ -205,3 +205,299 @@
 });
 ```
+## Oct 13, 2020 11:40AM - コメント (仕様変更) を受けての追記
+```html
+<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>
+```
+```css
+.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;
+}
+```
+```js
+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);
+```

コメントを受けてJSを修正

2020/10/13 02:40

投稿

thyda.eiqau

スコア2982

test CHANGED Viewed

@@ -120,6 +120,10 @@
   card.addEventListener('mouseup', evt => {
+    const anchorsParentClass = ['card-title', 'card-author', 'card-tag'];
     // mouseup した時間が mousedown の thresholdミリ秒以内なら、クリックとみなす
     const clickedMilliseconds = (new Date()).getTime() - card.dataset.clickBegan;
@@ -128,40 +132,42 @@
+    // 前回の判定のときに保持させていた、クリックを許すかどうかの値を削除する
+    [...card.querySelectorAll(`.${anchorsParentClass.join(' > a, .')} > a`)].forEach(link => {
+      delete link.dataset.isDisabled;
+    });
     // cardの中のどの要素が実際クリックされたのかを判定
     // 動作させたいリンクは .card-title, .card-author, .card-tag のいずれかの子要素
-    switch(evt.target.parentNode.className) {
+    if(anchorsParentClass.indexOf(evt.target.parentNode.className) !== -1) {
-      case 'card-title':
-      case 'card-author':
-      case 'card-tag':
-        // このリンクを動作させるかどうか保持させる
+      // このリンクを動作させるかどうか保持させる
-        evt.target.dataset.isDisabled = !isClick;
+      evt.target.dataset.isDisabled = !isClick;
-        break;
+      return;
-      default:
-        // リンク以外の場所でマウスが開放されて、かつクリックとみなす動作だった場合は
-        // .card-title > a を発火させる
-        if(isClick) {
-          card.querySelector('.card-title > a').click();
-        }
     }
+    // リンク以外の場所でマウスが開放されて、かつクリックとみなす動作だった場合は
+    // .card-title > a を発火させる
+    if(isClick) {
+      card.querySelector('.card-title > a').click();
+    }
   });