スマホ時のみクリックイベントを設定する

プルダウンやタブなどJavaScriptを使用したUIで、SP時とPC時で挙動を変えたいということがたまにあるので、どちらかの場合のみクリックイベントを設定する方法を試してみます。

サンプルコード

まずは特に設定せず、スマホ時とPC時で同じクリックイベントを設定してみます。

<button id="switch">プルダウンスイッチ</button>
<div id="pulldown">プルダウン内容</div>

.is-showが付与されると表示されるようにします。

#pulldown {
	display: none;
}
#pulldown.is-show {
	display: block;
}

ボタンクリック時にclassの追加・削除を行うようにします。

document.getElementById('switch').addEventListener('click', function() {
  document.getElementById('pulldown').classList.toggle('is-show');
});

これでスマホ時とPC時で同じ挙動ですが、プルダウン処理を追加できました。
設定前のデモページ

次にスマホ時のみプルダウンの処理を行う方法を試してみます。
まずはJavaScriptを使用するやりかたです。

document.getElementById('switch').addEventListener('click', function() {
  if(window.matchMedia('(min-width: 768px)').matches) return;
  document.getElementById('pulldown').classList.toggle('is-show');
});

matchMediaで768px以上の場合は処理を行わないようにしています。
matchMediaのデモページ

次にCSSを使用する方法で、pointer-eventsを使用します。

#pulldown {
	display: none;
}
#pulldown.is-show {
	display: block;
}
@media screen and (min-width: 768px), print {
	#switch {
		pointer-events: none;
	}
}

この場合も先ほどと同じく、768px以上の場合はクリックイベントが発生せず、処理を行わないようになります。
pointer-eventsのデモページ