Mobius1 / Pageable

Create full page scrolling web pages. No jQuery.
371 stars 57 forks source link

Links inside pages not working with touch devices #14

Open robindevouge opened 5 years ago

robindevouge commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

I'll get a fix out for this ASAP.

GiorgosK commented 5 years ago

Confirm the same problem first comment was very helpful

Mobius1 commented 5 years ago

A fix should be out soon.

ValeriiMetlenok commented 5 years ago

fixed that after commented this two strings 1

arnulphus commented 5 years ago

fixed that after commented this two strings 1

Works great with it!!

StevenJW commented 5 years ago

fixed that after commented this two strings 1

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 commented 5 years ago

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 commented 3 years ago

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

rauny-henrique commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago
Screen Shot 2023-03-25 at 15 47 10

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