How to replace click with a touch device on iOS devices

Question

purpose

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

Problem

It’s impossible to get it working on iOS devices after spending several hours on it. Works well for everything else, even on 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> 

Answer 1

Define a click handler that you can use later:

 var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click"); $("a").bind(clickHandler, function(e) { alert("clicked or tapped. This button used: " + clickHandler); }); 

This will cause the device to be tapped without touching and the touch screen on the touch devices.

When this is said, I highly recommend using Quick Click instead and using regular click events. With the above solution, you will run “touchstart” on the links when you swipe it to scroll through the page, for example, which is not ideal.

Answer 2

In iOS, a tag is an interactive element, so touching a link triggers mouse events (including click ).

This code

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

Works great on iOs.

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

Answer 3

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

For iOS mouse events such as click not bubble, if:

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

The easiest solution for me is to use cursor: pointer everywhere if it's an iOS touch device. Since the cursor has no visual impact