使用jQuery捕获点击事件 <li> 元素在iPad上不起作用

Question

在此页面上： http : //www.jwallacellc.com/fabric.htm

如果单击计算机上任何编号的模块，将显示一个弹出窗口。

如果在iPad上单击它们，将显示悬停状态，然后再次单击将显示弹出窗口。

我希望弹出窗口显示在iPad上的第一次单击上。

奇怪的是，该网站的主页上几乎发生了完全相同的事情，但是在这种情况下，第一次单击就可以毫无问题地打开弹出窗口： http : //www.jwallacellc.com

我不明白他们为什么做出不同的反应。 在这两种情况下，悬停状态均由CSS处理：

ul#home li:hover h2{height:160px;}
ul.interior li:hover h2{display:block;}

点击由jQuery / Javascript处理：

$('#home li').click(function(){…});
$('ul.interior li').click(function(){…});

我的选择器是否有某些差异，导致iPad第一次在我的内部页面而不是主页上捕获点击事件？ iPad是否认为因为存在悬停状态，所以应该第一次显示该状态吗？ 但是在这种情况下，为什么Javascript会忽略click事件？ 无论如何，由于某些原因，我的两个页面的功能有所不同。

将不胜感激任何建议。 谢谢！

Answer 1

iOS在链接上需要href="#"参数

Answer 2

以我的经验，这只是台式机和iPad Web开发之间的区别之一。 iPad正在侦听触摸事件，但仍可以处理单击事件（某种程度上）。 聆听点击时，第一次触摸始终是悬停，第二次点击是单击。

您可以通过使用Zepto.js（而不是jQuery）或jQuery插件（用于触摸事件）来监听触摸事件，而不是通过单击事件来监听触摸事件。

或者，如果您愿意，可以使用类似的教程手动设置触摸事件。

我不确定为什么其中一个页面实际上可以在第一次触摸时就可以正常工作，我从来没有能够通过单击处理程序来完成该操作。