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); }
タッチ対応デバイスで同時にマウス関係のイベントを登録しないようにしようかと考えています。