質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

7450閲覧

PCとタブレットそれぞれに適切なイベントリスナーを追加するには?

D.O

総合スコア55

iPad

iPadは、Appleがデザインしたタブレット型コンピュータです。iPadアプリケーションは通常Xcode IDEのObjective-Cで書かれますが、iPadアプリケーションを組むためのほかのツールを使うことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

4クリップ

投稿2015/05/03 00:44

PCやMac(マウスで操作するもの)とタブレット(タッチで操作するもの),タブレットPC(マウス,タッチどちらでもいけるもの)それぞれに適切にイベントリスナーを追加するにはどうすれば良いのでしょうか?

以前は,window.TouchEventを調べれば良かったのですが..例えば

if (window.TouchEvent) {
//タッチ用のイベント
hoge.addEventListener('touchstart',fun,false);
} else {
//マウス用のベント
hoge.addEventListener('click',fun,false);
}

みたいにすれば良いと何かでよんだのですが,最近のGoogle ChoromeやFireFoxでは普通のPC上でもwindow.TouchEventがtrueになりますよね?

というわけで
PCやMacにはマウスイベントを
タブレットにはタッチイベントを
適切に追加するためにはどのような分岐をすればよいのでしょうか?
定石みたいなものがあれば是非お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

document.ontouchendはタッチをサポートする環境(※1)では初期値としてnullが入っており、
サポートしない環境では定義されていないため、
'ontouchend' in document(※2)で問題なく分岐できそうです

lang

1if ('ontouchend' in document) { 2 // タッチ用 3} else { 4 // マウス用 5}

あと分岐ですがイベント名の方を分岐するというのもよくやりますね。

lang

1var EVENTNAME_TOUCHSTART, EVENTNAME_TOUCHMOVE, EVENTNAME_TOUCHEND; 2if ('ontouchend' in document) { 3 EVENTNAME_TOUCHSTART = 'touchstart'; 4 EVENTNAME_TOUCHMOVE = 'touchmove'; 5 EVENTNAME_TOUCHEND = 'touchend'; 6} else { 7 EVENTNAME_TOUCHSTART = 'mousedown'; 8 EVENTNAME_TOUCHMOVE = 'mousemove'; 9 EVENTNAME_TOUCHEND = 'mouseup'; 10} 11element.addEventListener(EVENTNAME_TOUCHSTART, function (e) { 12}); 13element.addEventListener(EVENTNAME_TOUCHMOVE, function (e) { 14}); 15element.addEventListener(EVENTNAME_TOUCHEND, function (e) { 16});

※1 例えばChrome開発者ツールでEmulate touch screenを有効にするとPCでもontouchendがnullになります
※2 "ontouchstart"や"ontouchmove"等でも同じようにできるのですが文字数が一番少ないのでこうしてます

投稿2015/05/03 10:16

編集2015/05/03 10:29
MAGP

総合スコア153

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

D.O

2015/05/05 01:43

詳しい解説ありがとうございます。 試したところうまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問