Bloosh Company

記事のサムネイル画像です。

2017年8月15日

Development>フロントエンド

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

, , ,

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

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

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

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要素にイベントが適用されました。

PCとスマートフォンのクリックイベント | ブルーシュカンパニー

<<次の記事

ループの書き方

前の記事>>

【WordPress】プラグインなしでお問い合わせフォームを設置する