Twenty Nineteen: Link are triggered on touchstart instead of touchend

[panchen]

Hi,
I am a WordPress lover and I updated my website to WordPress 5.0 and began using TwentyNineteen. Then I found a big bug, that is, on mobile device, if I 'press' the hyperlink, it will jump to the hyperlink immediately! I spent two hours finding 'why' and after creating a totally new WordPress site and creating a primary menu, the problem occurs. So I am pretty sure it is because there are some bugs about TwentyNineteen's Menus.

And it is interesting that Matt's Blog is now using TwentyNineteen too but it seems OK in Matt's Blog. So, it is so weird. But I still think TwentyNineteen has some bugs in Menus settings.

Best wishes!

[kjellr]

Thanks for filing the report, @panchen!

on mobile device, if I 'press' the hyperlink, it will jump to the hyperlink immediately

I think what you're saying here is that when using a touch-enabled device, top-level menu links trigger when you first press your finger on them, not when you raise your finger off the screen. Is that correct? In developer terms, the link is triggered on touchstart, not on touchend. Binding the action to touchend is definitely standard behavior, so I do believe that is something we should change.

Can you confirm that's the issue you're reporting here? If so, we can update the issue title to be a little more descriptive of the issue.

Thank you!

[panchen]

Yes! The link is triggered on touchstart, not on touchend. And not only top-level menu links trigger immediately after I press my finger on them, but also other links, for example, the titles of posts, the tags of the tag cloud, and so on.

And once I removed the Primary Menu, the problem disappeared.

And for social link menu, everything is OK.

[kjellr]

Ok, thanks! I'll update the title of this post to be a little more descriptive.

[panchen]

Hi.
After I deleted the touch-keyboard-navigation.js in the /js/ folder of Twenty Nineteen. The problem disappeared. So I think touch-keyboard-navigation.js is what causes the issue.

[kjellr]

Fix from ​https://github.com/WordPress/twentynineteen/pull/721 on GitHub. Props: anevins

[laurelfulford]

Thanks for the report, @panchen, and for the GitHub report and patch, @anevins!

This also looks good to me and ready to commit - thanks for moving it to Trac, @kjellr!

[laurelfulford]

In 44357:

Twenty Nineteen: Make sure links are followed on touchend, not touchstart.

The theme's original navigation JavaScript was making it so all links on a site were immediately followed on touchstart when using a touch-enabled device. This update makes sure links are followed at touchend, to improve usability and menu behavior.

Props anevins, panchen, kjellr.
Fixes #45510.

[laurelfulford]

In 44358:

Twenty Nineteen: Make sure links are followed on touchend, not touchstart.

The theme's original navigation JavaScript was making it so all links on a site were immediately followed on touchstart when using a touch-enabled device. This update makes sure links are followed at touchend, to improve usability and menu behavior.

Already committed to the 5.0 branch in [44357].

Props anevins, panchen, kjellr.
Fixes #45510.

[laurelfulford]

Reopening for merging to the 5.0 branch.

[laurelfulford]

Oops, nevermind, this one is already there. :)