Touch Event detection with JavaScript - markhowellsmead/helpers GitHub Wiki
const isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;
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();
});