Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable Double Tap To Click On Touchscreen iOS Devices

So, quite recently I've been working on a website that was given me to improve and make responsive, and one of the issues that I've been faced with is that there are many elements that are clickable, with a mixture of CSS and jQuery effects for hover states.

Now, firstly I'd prefer all of these hover states to be CSS, but the main issue I'm having is that on these hover states, certain elements are changing display and visibility css properties. I did some reading, and apparently if this is the case, on touchscreen iOS devices, this causes the first 'touch' to force the hover state, and then a second click is needed to actually click the element.

I'm trying to find a solution that doesn't require lots of markup and styling changes. Preferably a fix harnessing jQuery/JavaScript would be good.

I've tried the following:

$(document).ready(function() {
   $('a').on('click touchend', function(e) {
      var el = $(this);
      var link = el.attr('href');
      window.location = link;
   });
});

However, this has issues when the user holds their finger down on a clickable element, and drags the page to scroll. When they release their finger after dragging, the window.location is still changed.

I'll add a jsFiddle later if necessary.

Thanks in advance.

EDIT:

Here's a jsFiddle that shows the issue. http://jsfiddle.net/0bj3uxap/4/ If you tap one of the blocks, you'll see it shows the hover state, you then need to tap again to actually fire the click event.

It seems to happen when an element is hidden, and then the hover state shows the element.

like image 244
Daniel Dewhurst Avatar asked Nov 25 '15 17:11

Daniel Dewhurst


People also ask

How do I turn off touch and tap on my iPhone?

On supported iPhone models, you can prevent touches on the display from waking iPhone. Go to Settings > Accessibility > Touch, then turn off Tap to Wake.

Why does my iPhone make me double tap everything?

Question: Q: i have to double tap everything Answer: A: Sounds like you have VoiceOver (one of the accessibility features) 'on'. Try triple-clicking the home button and see if that turns it off, and if it does you can then change what a triple-click does via Settings > General > Accessibility > Triple-Click Home.


1 Answers

Looks like I found a solution.

https://github.com/ftlabs/fastclick

FastClick fixes this issue, and removes the 300ms delay issue with some mobile browsers.

Just include the library in <script> tags, and then initiate it using jQuery, or whatever you prefer:

$(document).ready(function() {
    FastClick.attach(document.body);
});

Just to explain briefly why the issue occurs:

When an element is hidden, for example when it has a CSS property of any of the following:

display: none;
opacity: 0;
visibility: hidden;

And the hover state of the hidden element then shows the element, iOS doesn't fire a click event on the first touch, it forces the hover state (to show the element). The user then needs to touch the element again for a click event to fire.

I see why this has been added, but I think I'd rather iOS didn't do this, and then developers would just need to tailor their websites to not hide content that coud be vital.

like image 146
Daniel Dewhurst Avatar answered Sep 30 '22 17:09

Daniel Dewhurst