IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログ/touch, mouse を振り分け、hover イベントを統一する

はてなブログ/touch, mouse を振り分け、hover イベントを統一する

2018/04/16 javascript, はてなブログ

はてなブログ/touch, mouse を振り分け、hover イベントを統一する

:hover のないタッチデバイスで同等のイベントをどう実装するかの記事です。

タッチデバイスでの実装については、すでに「はてなブログ/スマホなどタッチデバイスの :hover イベント対応」で記事にしているのですが、レスポンシブデザインで実装するにはマウスデバイスとの振り分けも必要になります。

  • タッチ、マウスの振り分け
  • タッチデバイスの場合のトリガー
  • サンプル
  • Javascript

タッチ、マウスの振り分け

if ("ontouchstart" in window) {
  // タッチデバイス
} else {
  // マウスデバイス
}

これで振り分けられます。window オブジェクトに ontouchstart というプロパティが存在すればタッチデバイスということです。

タッチデバイスの場合のトリガー

「はてなブログ/スマホなどタッチデバイスの :hover イベント対応」の記事では、javascript では扱えない疑似要素をトリガーにしたために .archive-entry(画像)のどこをタッチしたかで判定していたのですが、これですと画像を横に並べた場合にかなり煩雑になりますので、今回は javascript で新しく要素を追加することにしました。

ただ、実際に計画中の「そんなには褒めないよ。映画評」への実装では、カテゴリを事実上使用していませんので、.categories を利用する予定でいます。

サンプル

サンプル

(注)サンプルの挙動が変ですね。コードの問題ではないとは思うのですが…。

タッチデバイスの場合は、左下に「i」アイコンが表示されます。また、サンプルですので文字サイズやテキストの位置などは適当な数値になっていますのであまり美しくないと思います。

(注)この下に Codepen のサンプルが表示されますが、読み込みに時間がかかる場合があります。

See the Pen for Hatena-blog-hover3 by ausnichts (@ausnichts) on CodePen.

Javascript

var entries = document.getElementsByClassName('archive-entry');
Array.prototype.forEach.call(entries, function(entry){
  if ("ontouchstart" in window) {
    var trigger = document.createElement('div');
    trigger.classList.add('trigger');
    entry.appendChild(trigger);
    trigger.addEventListener('touchstart', function() {
      entry.classList.toggle('hover');
    });
  } else {
    entry.addEventListener('mouseover', function() {
      entry.classList.add('hover');
    });
      entry.addEventListener('mouseout', function() {
      entry.classList.remove('hover');
    });
  }
});

これで、タッチデバイス、マウスデバイス、どちらの場合でも .archive-entry.hover の下に指定したスタイルが適応されます。Codepen の CSS(sass)を参照してください。

はてなブログ/ブレイクポイント1つのテーマのワイヤーフレーム
Joomla! 3.8.7 バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com