My problem is the following: On my local website my main menu has an hover effect (border bottom). As we know it takes a double tap for visitors with touch devices to really tap the link. Is there a chance to disable the hover effect only on touch devices?
I've already tried the following:
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;});
In fact that works well. I don't need to double tap the link, it works fine BUT on my desktop pc all normal target="_blank" links load in an extra tab (as usual) but also in the same tab. So the external links open twice. Is there a chance to avoid that?
I hope you understand what I mean.
Thanks in advance!
As stated in the comments, just leave out the "click". Of course your desktop browser listens on the click event and thus will execute the handler.
$('a').on('touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;});
If you want to open links with target="_blank" in a new tab on mobile devices as well, you should account for that, check for the target and use window.open() in that case instead of window.location.
Please also keep in mind that nowadays there are desktop PCs with touch-enabled displays that will also listen to the "touchend" event and will open the links twice. So it would be a good idea to check if it's really necessary to open the links at second click instead of first click in the first place.