ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

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とスマートフォンのクリックイベント #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #click #JavaScript #jQuery #touchstart

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク