Links inside pages not working with touch devices

[robindevouge]

trafficstars

Hi!

I noticed that with a touch input (either with a mobile device or Chrome responsive emulation) clicking on a link doesn't work unless you "double touch" it.

However, this doesn't happen if you set touch events to false on initialisation, so I thought this was caused by Pageable catching the touch to swipe thus preventing to trigger the link's.

This behaviour can be replicated in the playground by replacing a page text with a link while in responsive mode in chrome.

If anyone else reading this is affected by this issue and looking for a temporary solution : I fixed it with some JS by adding a listener on the affected links that redirects to their url but that isn't ideal

Array.from(document.querySelectorAll('.myLink')).forEach((el) => {
  el.addEventListener('touchend', () => {
    window.location.href = el.href;
  });
});

[conhuynh]

I'm also having this issue.

I've had to add in some extra buttons that appear on touch devices to get around this bug for now.

[Mobius1]

I'll get a fix out for this ASAP.

[GiorgosK]

Confirm the same problem first comment was very helpful

[Mobius1]

A fix should be out soon.

[ValeriiMetlenok]

fixed that after commented this two strings

[arnulphus]

fixed that after commented this two strings

Works great with it!!

[StevenJW]

fixed that after commented this two strings

It does work but it makes the animation glitch, as if you could scroll freely. Personally as quick fix I wrote an if statement around these preventDefault statements to exclude buttons/links.

[piotrku]

This is some solution @ValeriiMetlenok thanks for that! @Mobius1 - thanks for the script anyway - very useful :) Is there a chance for a real solution anytime soon?

[aleksandrp]

Same trouble on inside scroll and buttons. NAV container works fine...

[rauny-henrique]

The version 0.6.8 almost solved this problem, to solve this problem completely it is necessary replace (on "_start" method):

this._preventDefault(a) for (b.target.closest("a") || this._preventDefault(a))

@Mobius1

[teddyh-io]

Desperately wanted @ValeriiMetlenok 's function to work, but it completely broke scrolling as @StevenJW said. @robindevouge 's solution takes you to the link even if you are trying to move between pages. This should detect drag and only take you to links if there is no drag.

var isDragging = false;
jQuery(window)
.touchmove(function(e) {
    isDragging = true;
 })
.touchend(function(e) {
    var wasDragging = isDragging;
    if (!wasDragging) {
    window.location.href = jQuery(e.target).attr("href");
    }
    isDragging = false;
});

[juniorrumbelow]

You can add in a checks on the e.target.nodeName to ignore those elements e.g inputs and links, seems to work for me