Touch Event detection with JavaScript

TLDR

const isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;

Detail

Add the following to the page head.

<script>!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);</script>

Then you can react to the class touch (or no-touch) on the html element.

var showOverlay = function(){
	// your function to show an overlay
};

var hideOverlay = function(){
	// your function to hide an overlay
};

$('html.touch [data-show-overlay]').on('touchstart.showoverlay', function(e){
	showOverlay();
});

$('html.no-touch [data-show-overlay]').on('mouseover.showoverlay', function(e){
	showOverlay();
});

$('html.no-touch [data-show-overlay]').on('mouseout.showoverlay', function(e){
	hideOverlay();
});