How to replace click with touchstart on iOS devices

问题

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>

回答1:

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.

回答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

回答3:

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

来源：https://stackoverflow.com/questions/18201361/how-to-replace-click-with-touchstart-on-ios-devices

标签

jquery

ipad

click

touchstart