jQueryを使用してデバイス事にマウスとタッチのイベントを分ける


何だかんだで度々PCとその他デバイスの判別処理が必要になるのでメモ。
別に分けなくても.click()や.on('click')の処理はされるが、iPhone4のhoverによるbox-shadowのバグや、フリックやスワイプによる操作を実装する為にもイベントは分けた方が明示的で良いかなと思う。
もしNUIとか流行ったら処理内容じゃなくて拡張の方を書き換えれば対応できるし。

とりあえずextendに以下を記述

$.extend({
// デバイス判別
 isMobile : function(){return(navigator.userAgent.match(/(iPhone|iPad|Android|Windows Phone)/))?true:false},
// 判別してイベント切り替え
 evt : function(){return($.isMobile())?{start:'touchstart',move:'touchmove',end:'touchend'}:{start:'mousedown',move:'mousemove',end:'mouseup'}},
// イベントオブジェクト切り替え
 r_evt : function(e){return($.isMobile())?e.originalEvent.touches[0]:e}
});

使い方

例えばhtml,body{height:100%;}にしたら、後は$(function(){})内で、
var evt = $.evt();
$('body').on(evt.move,function(e){
 $(this).html($.r_evt(e).pageX);
});

注)$.r_evt()はあくまでも指1本の時の処理だから、ピンチや指2本でのスクロールなんか実装する場合は、returnする内容をlengthで計測して配列で返したりする方が良いかもしれない。
Related Posts Plugin for WordPress, Blogger...