PCとスマートフォンのクリックイベント

「ある要素をクリックしたら～する」という関数をJavaScriptで書いた場合、スマホだと反応が遅かったり、動作が変になったりする場合があります。
 

//例
function hoge(){
	alert("fuga");
}
document.getElementById("id_name").addEventListener("click", hoge);

 
スマホでは、clickではなくタップ時に発生するイベントtouchstartやtouchendを利用しましょう！
 

document.getElementById("id_name").addEventListener("click", hoge);
document.getElementById("id_name").addEventListener("touchstart", hoge);

 
ただ、↑このようにPCのクリックイベントとスマホのタッチイベントの両方に対応させると動作がおかしくなります。そんなときは、touchstartに対応しているデバイスかどうか判断して、どちらか一方のイベントを登録しましょう！
 

var e;
if (window.ontouchstart === null) {
	e = "touchstart";
} else{
	e = "click";
}
document.getElementById("id_name").addEventListener(e, function(){
	alert("fuga");
}, false);

 
ただし、上記のようにJavaScriptだけを使用している場合は、1つのイベントにつき1つの要素しか登録できません。
 

//三項演算子でも可
var e = window.ontouchstart === null ? "touchstart" : "click";
document.querySelector(".class_name").addEventListener(e, function(){
	alert("fuga");
}, false);

 
このように↑しても、ページ上にある.class_nameの1つ目の要素でしか動作しません。JavaScriptのみでも方法はありますが、jQueryで書けば1発です。

var e = window.ontouchstart === null ? "touchstart" : "click";
$(document).on(e, '.class_name', function () {
	alert("fuga");
});

 
これで、ページ上のすべての.class_name要素にイベントが適用されました。