jQueryで、on()にclickとtouchstartを併記したら、スマホでのタップイベントの動作がおかしくなった


jQueryで、on()にclickとhoverを設定して、同じ処理をしたい【jQuery】
この記事の続き。

 

「.on('click mouseenter',~)」で解決した ハズだった。

 

スマホで見てみると、クリックした時の、微妙に反応の鈍さ(遅さ)が気になる。
 ↓
調べると、スマホでのclickは、タイムラグが発生するらしい。
 ↓
じゃあ、スマホのためにタップ系の「touchstart」イベントも設定に追加するンゴ!
「.on('click mouseenter touchstart',~)」、と。
 ↓
あ、あれ・・・?スマホのブラウザで確認すると、タップした時の挙動が変。。

・・・スマホの時だけ、eventが2度呼ばれてるっぽい??(汗)

 

はぁ。
対応しますとも。。

|不具合対応| λ............ (トボトボ)

 

 

そして完成したのが、これ!!

// clickイベントでの処理(mouseenter は省略)
var clickEventType=((window.ontouchstart!==null)?'click':'touchstart');
$("#test").on(clickEventType, function() {
	// クリック、タップ時の処理を記述
});
PCブラウザでは「ontouchstart」が存在しないので、それを判定基準とし、
 有る場合:「"touchstart"」 を設定。(スマホ用)
 無い場合:「"click"」 を設定。(PC用)
としている。

 

 

click and hover(mouseenter)イベントで処理したい場合

ついでに、click and hover(mouseenter)イベントで処理したい場合はこちら。

// click and hoverイベントで処理したい場合はこちら
var clickEventType=((window.ontouchstart!==null)?'click mouseenter':'touchstart');

 

今のところ、問題なく動作している。

 

スマホの場合は、clickよりも「touchstart」の方が、動作がサクサクでいいねぇ!