Blogger:カレンダー(6)Calendar_Bloggerモジュールの作成その5

モバイルサイトのタッチイベントへの対応とコードの整理をします。

前の関連記事：Blogger:カレンダー(5)Calendar_Bloggerモジュールの作成その4

タッチイベントtouchstartをイベントハンドラに追加

Blogger:カレンダー(5)Calendar_Bloggerモジュールの作成その4で作成したカレンダーをiOS Safariでタッチするとツールチップが表示されますが、ほかの日をタッチするまではツールチップが消えません。

mouseoverはタッチで起動するようですが、mouseoutは反応しないようです。

Using any HTML inside the tooltip

このjQuery TOOLSの例でもiPod touchではタッチしたらツールチップが出たままツールチップが消えません。

そこでタッチされたときはwindow.setTimeoutを使ってツールタッチ表示後一定時間でツールチップを消すことにしました。

イベントリスナーに追加するイベント名についてはJavaScriptプログラミング講座【タッチスクリーン操作について】の解説が参考になりました。

Calendar_Blogger/Calendar_Blogger.js at 5921b6afb8aff624aa6e2f8ba37097dec2e06710 · p--q/Calendar_Blogger

        clNode.addEventListener( 'touchstart', touchStart, false );  // タップしたときのイベントハンドラ。mouseoverより先に実行必要。
        clNode.addEventListener( 'mouseover', onMouse, false );  // カレンダーのdiv要素でイベントバブリングを受け取る。マウスが要素に乗ったとき。
        clNode.addEventListener( 'mouseout', offMouse, false );  // カレンダーのdiv要素でイベントバブリングを受け取る。要素に乗ったマウスが要素から下りたとき。

カレンダーのflexコンテナにtouchstartのイベントハンドラを追加しました。

    function touchStart(e) {
        var target = e.target;  // イベントを発生したオブジェクト。 
        if (target.className=="tooltip") {  // ツールチップを持っているノードのとき
            if (vars.tt){  // 現在ツールチップが表示されているとき
                vars.tt.lastChild.style.visibility = "hidden";  // 現在のツールチップ表示を消す。
            }
            vars.tt = target;  // ツールチップ表示ノードを再取得。
            vars.tt.lastChild.style.visibility = "visible";  // ツールチップを表示させる。  
            window.setTimeout(offTooltip, 5*1000);  // 5秒後に表示を消す。
        }
    }

そしてこのtouchStart()関数を実行するようにしました。

149行目でツールチップ表示を消す関数offTooltip()を5秒後に呼び出しています。

これでiPod touchで日をタッチするとツールチップがでて何もしないとしばらくすると勝手にツールチップが消えます。

5秒後に消えるように設定していますが、少しムラがあります。

touchstartのイベントリスナーをmouseoverのあとに実行するとうまくいきませんでした。

コードを整理する

だいたい機能が揃ってきたのでコードの整理をしました。

あと細かなバグ修正もしました。


Calendar_Blogger/Calendar_Blogger.js at a8b76442c88db7064184542cda080bdea1680b34 · p--q/Calendar_Blogger

似たような機能をオブジェクトにまとめるとだいぶすっきりしました。

ツールチップ表示を消す方法はすべてwindow.setTimeoutを使う方法に統一しました。

ツールチップのSPAN要素をでるときはすべて30ミリ秒後にツールチップを消す関数を遅延して実行するようにしました。

ツールチップ内からマウスポインタが出た先が、まだツールチップを消したくない要素のときはwindow.clearTimeoutでツールチップ表示を消す関数の遅延実行を取り消しています。

これでスマートにツールチップの表示ができるようにありました。

ただ、モバイルサイトのタッチデバイスについてはタップしてツールチップ表示した後にツールチップを消すタイミングを知る方法はないので、すべて5秒後にツールチップ表示を消す方法を採用しています。

ツールチップのノードのstyleを変更してツールチップを上に表示させるように変更しました。

参考にしたサイト

Using any HTML inside the tooltip
jQuery TOOLSによるツールチップ表示の例。タッチデバイスには対応していないようです。

JavaScriptプログラミング講座【タッチスクリーン操作について】
タッチイベントの解説。

次の関連記事:Blogger:カレンダー(7)Calendar2_Bloggerモジュールの作成その1