Detect a touch event properly with JQuery on devices that does not seem to be a Touch only device

Question

Our company sells Interactive LED panels and the menu on our website will not open the sub-menu items properly when using Touch input. The parent link is currently only a placeholder for the sub-menu items, this means that there is no href on the first Parent item on the menu, but this may change, then you will have to accommodate double tapping on the link to actually go to that link. The sub-menu items will currently only show on hover.

I have looked at most of the answers on stackoverflow and tried most of them, but it does not seem to work or some of the answers have deprecated code.

How to recognize touch events using jQuery in Safari for iPad? Is it possible?

Javascript, detect touch devices

https://codeburst.io/the-only-way-to-detect-touch-with-javascript-7791a3346685

https://knackforge.com/blog/karalmax/how-deal-hover-touch-screen-devices

How to check browser for touchstart support using JS/jQuery?

I created an If statement which will write to the console if it was a Touchstart or Click event. I used the JQuery on("click touchstart") section of code on one of the answers, but no luck. I noticed as I was testing on PC and on the 2 in 1 Touchscreen Windows tablet (Normal Mode) that the console detected it as a normal Click event when I tapped on the link. Touchstart never came up. I then proceeded to read up on Modernizr. Our site already have Modernizr running. I noticed that on the 2 in 1 Touchscreen tablet that the Class 'no-touch' is showing, so it is behaving as a normal PC with no Touch. I need to write code that will work in Tablet and Normal mode as well as getting this working on an Interactive Touch LED panel. Our website is www.parrot.co.za, you will notice on the menu that "Documents" is the main parent item with sub-menu items. I have included a screenshot of the HTML structure. What I would like to achieve is to get the Sub-menu showing when you tap on the menu linK.

Hi Huangism, I just want a function to do something only when it is a touchscreen device. The problem is that on LED Touch panels or 2 in 1 tablets, the site thinks it is on a normal device with a mouse pointer. I somehow need to detect that a human is touching the screen input device. — Tig7r, Mar 02 '18 at 05:52
Try bind 'hover' instead of click. On hover add class 'open' to parent
To be honest, you can just have the menu interact on click, forget about hovering, it is actually harder to work with specially when the menu closes when unhovered. It is the way sites are going with these days anyway. You don't need to worry about if it is a touch screen or not, check menus at toyota.ca or lexus.ca — Huangism, Mar 02 '18 at 14:20
I ended up using the code below. How can I add an else statement to the href statement to allow the first click on the parent item with a valid link to open the submenu, but on the second click it must go to the parent's link? $( ".haschild").on( "click ", function() { var checklinkhref = $(this).find("a"); if($(checklinkhref).attr('href') === undefined) { if($(this).hasClass("opensubmenu")){ $(this).removeClass('opensubmenu'); $(this).removeClass('hover'); }else{ $(this).addClass('opensubmenu'); } } }); — Tig7r, Mar 22 '18 at 05:47

score 0 · Answer 1 · answered Mar 27 '18 at 14:32

This is the solution I came up with. It will open the submenu on Touch and Non-Touch devices when the parent link does not have a href link. I have a class with a CSS property of Display:block. I discovered that the Hover class I had to remove as well as this property from the Theme was giving issues.

I can add an ELSE statement later which will open the submenu once clicked, but prevent the first click event on the parent of actually going to the page. It will only go to the parent page link when someone clicks on it the second time.

 $(".haschild").on("click ", function() {
  var checklinkhref = $(this).find("a");
  if($(checklinkhref).attr('href') === undefined) { 
     if($(this).hasClass("opensubmenu")){
     $(this).removeClass('opensubmenu');  
     $(this).removeClass('hover'); 
  }else{
     $(this).addClass('opensubmenu');
  }
}
});

Detect a touch event properly with JQuery on devices that does not seem to be a Touch only device

1 Answers1