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/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com