時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

iPadのクリック、タッチイベントについて javascript

少し情報をこちらで追加しています。

 

jQuery使用

 

マウスやタッチデバイスで操作する際、それぞれ以下のようなイベントがあります。

 

・マウス

mousedown

mousemove

mouseup

click

dlclick

・タッチデバイス

touchstart

touchmove

touchend

 

私は今まで、マウスが使用できマウスが接続されている場合、マウスのイベント

タッチデバイスで、マウスが接続されていない場合、タッチデバイスイベント

だと思っていました。

しかし、作成したjavascriptを使用しているとiPadで動作が挙動不審に

簡単なjavascriptを作成して原因がわかりました。

iPadではマウスイベント、タッチデバイスイベントの両方が発生しているようです。

そのため、マウス、タッチ両方のイベントをバインドした時iPadでは同じようは挙動が2回起きてしまいます。

 

例えば、

$(hoge).bind('mouseup touchend', function(){

    alert('hogehoge');

});

とイベントを追加すると、iPadでhogeを押し終わったときは2回alert('hogehoge');が実行されます。

他のスマートフォンやPCではそんなことはなかったので気にしてませんでした。。。

 

しかし、iPadのような挙動をするデバイスが他にもあるかもしれません。

 

ということで今後気をつけていきたいです。

 

ちなみに私は、

// タッチデバイス判定
function isTouch(){
    return (document.ontouchstart !== undefined);
}

 

タッチ対応デバイスで同時にマウス関係のイベントを登録しないようにしようかと考えています。