How to replace click with touchstart on iOS devices

Question

Objective

To close the parent div of an anchor tag when clicked. In the code below, I want to hide div performance_tt when the user clicks on anchor tag close_performance_tt.

Problem

Unable to get it to work on iOS devices after spending several hours at it. Works fine on everything else, even a BlackBerry 10 device.

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
    <div>Website performance has become an important consideration for most sites.
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
    As a result, creating a system that is optimized for fast responses and low latency is key.</div>
    <a id="close_performance_tt" href="#">Close</a>
    <script>
    var userAgent = navigator.userAgent.toLowerCase();
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    if (isiOS) {
        $("#close_performance_tt").bind('touchstart', function() {
            alert('Touch-start event triggered');
        });
    } else {
        $("#close_performance_tt").bind('click', function() {
            alert('Click event triggered');
        });
    }
    </script>
</div>

why not use `$("#close_performance_tt").bind('click touchstart', ..)` instead of the `if..else` — Arun P Johny, Aug 13 '13 at 05:37

curly_brackets · Accepted Answer · 2014-03-20T20:30:48.563

Define a clickhandler that you can use later on:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

This will trigger click on non-touch devices and touchstart on touch devices.

When that is said, I will strongly recommend using Fast click instead, and use regular click-events. With the above solution, you will trigger "touchstart" on links when you swipe on it to scroll the page for instance - which is not ideal.

score 3 · Answer 2 · answered Jul 16 '15 at 16:01

See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

For iOS mouse events like click do not bubbe unless:

The target element of the event is a link or a form field.
The target element, or any of its ancestors up to but not including the , has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.

The easiest solution for me is to apply cursor: pointer everywhere in case it is a iOS touch device. As there's no cursor it does not have any visual impact

really useful answer guys, please pay attention to it! thanks, Sebastian — mcmxc, Dec 20 '17 at 15:15

BMH · Answer 3 · 2013-08-13T06:03:15.337

2

In iOs a tag is a clickable element, so touch on the link will trigger the mouse events (including click).

This code

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');                             
});

will work fine on iOs.

For more information: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

edited Aug 13 '13 at 06:03

answered Aug 13 '13 at 05:48

BMH

4,280
1
18
18

If I use your code, I need to click twice before I get the alert. Subsequently I need to click about 4 times for the alert to show. However with the following code, the alert fires all the time. $("#close_performance_tt").bind('click touchstart',function() { alert('Event registered.'); }); – KalC Aug 13 '13 at 05:52
1

I just test the code on my iPad, it works fine. Make sure you do a single tap, if you hold or double tap it wont trigger the `click` event. – BMH Aug 13 '13 at 06:12
1

I don't have an iPad. Testing on iPhone 4S. Did not work. I will test on an iPad in a couple hours. Will get back. – KalC Aug 13 '13 at 06:24

How to replace click with touchstart on iOS devices

3 Answers3

Linked