プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML、タブレット・スマホ系のWebサイトを作成する際の注意点(1)
「オンマウス」の概念がない(--)b

冷静に考えれば当たり前なのですけどね。

自分ところのWebサイトをiPadで動作確認していたら
メニューを2回押さないと画面が切り替わらなくてですね。
調べたら「mouseover」「mouseout」に処理埋めていたのが原因でした。

スマートフォンやタブレットPCの場合はマウスイベントの代わりに
タッチイベントがあるそーです。
タッチイベントの種類は

touchstart → ぽちっと押したときに発生
touchmove → ぽちっと押したままずずいっと引きずったときに発生
touchend → ぽちっと押した指を離したときに発生
touchcancel → ぽちっと押してるときに割り込みがあると発生(電話かかってきたとか)

ってな感じ。

ふ~ん(--)
個人的には使う機会があまり無い気もするなぁ。
裏側の処理をやらせるならともかく、
タッチイベントで見た目を制御すると逆に使いにくい気がします。

例えばアコーディンなメニューの開閉の場合、
PCでは「乗せる」って動作と「押す」って動作が別だから
乗せる=メニュー開く
押す=リンク移動
離す=メニューを閉じる
って制御ができるけど「乗せる」=「押す」なタブレットだと
メニューの開閉タイミングをどうするか?って微妙そうだし。
「touchend」イベントでメニューを閉じるとリンク押せないし
閉じないのであれば素直にメニュー開くのはonclickイベントに実装すれば良い気がするし。

PC用とタブレット用は別物って割り切った方が良いのかもしれませんね(--ゞ
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事