如何在iOS设备上用touchstart替换click

目的

单击时关闭锚标记的父div。 在下面的代码中，我想在用户单击锚标记close_performance_tt时隐藏div performance_tt 。

问题

花了几个小时后，无法让它在iOS设备上运行。 在其他一切工作正常，甚至是BlackBerry 10设备。

 
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.
 Close  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'); }); }   

Answer 1

定义稍后可以使用的clickhandler：

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

这将触发点击非触摸设备和触摸设备上的触摸启动。

说到这里，我强烈建议使用快速点击 ，并使用常规点击事件。 使用上述解决方案，当您在其上滑动以滚动页面时，您将在链接上触发“touchstart” – 这是不理想的。

Answer 2

在iOs中a标签是可点击元素，因此触摸链接将触发鼠标事件（包括click ）。

这段代码

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

将在iOs上运作良好。

有关更多信息，请访问： http ： //developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 3

请参阅http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

对于iOS鼠标事件，例如click不要bubbe，除非：

• 事件的目标元素是链接或表单字段。
• 目标元素或其任何祖先（包括但不包括）具有为任何鼠标事件设置的显式事件处理程序。 此事件处理程序可能是一个空函数。
• 目标元素或其任何祖先（包括文档）都有一个游标：指针CSS声明。

对我来说最简单的解决方案是将cursor: pointer应用到任何地方，以防它是iOS触控设备。 由于没有光标，它没有任何视觉影响