如何在 iPhone Web 应用程序中使用 jQuery 进行点击事件

Question

当我使用 jQuery 进行简单的单击事件时，它仅适用于链接。有没有办法让它适用于跨度等：

$("span.clicked").live("click", function(e){alert("span clicked!")});

$("a.clicked").live("click", function(e){alert("link clicked!")});

SPAN 适用于 Safari，但不适用于 Mobile Safari（在 iPhone 或 iPad 上），而 A 标签适用于两者。

Answer 1

我也为此苦苦挣扎。经过大量的尝试并试图找出问题之后，我找到了一个简单的解决方案。

如果您将元素的cursor设置为pointer，它会神奇地再次与Jquery的live和click事件一起工作。这可以在 CSS 中进行全局设置。

Answer 2

您需要监听“touchstart”和“touchend”事件。使用 jQuery 添加侦听器...

$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );

您可能希望侦听 touchstart 和 touchend，以便可以验证手指触摸时的目标元素与手指移开时的目标元素相同。

我确信可能有更好的方法来做到这一点，但应该工作:)

编辑：有更好的方法！请参阅https://stackoverflow.com/a/4910962/16940

Answer 3

实际上，您不需要使用 touchstart 或 touchend 事件，只要“span”标签（或“a”标签以外的任何内容）具有以下 css 属性：

cursor:pointer

单击将注册

Answer 4

您还可以通过添加空的 onclick 属性来诱导浏览器生成单击事件。对于腰带和大括号方法，以防任一方法在任何给定的 iOS 更新中停止工作，您可以使用类似以下的内容：（

$("span.clicked").live("click", function(e){alert("span clicked!")})
                 .attr('onclick','')
                 .css('cursor','pointer');

假设您没有任何实际的 onclick 属性，您不介意删除）

Answer 5

您可以添加一个空的 onclick 属性，如下所示：

<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });

Answer 6

我尝试了一切方法，但没有一个有效。事实证明，我无法获取点击事件，因为我的 img 下有一个视频元素。视频元素显然会吃掉点击事件。

Answer 7

当面向 iOS 时，您必须考虑以下事项： 在 jQuery 中进行事件委托，如 $(document).on('click', '.target-element', function (event) {... }); 将不起作用。您必须将 onclick="" 添加到目标 HTML 元素，或将 cursor:pointer 添加到其样式。

摘自并改编自 http://gravitydept.com/blog/js- ios 上的点击事件冒泡：

事实证明，iPhone 上的 Safari 不支持单击事件的事件委托，除非单击发生在链接或输入上。幸运的是，有可用的解决方法。

这就是 标记有效而 无效的原因。

Answer 8

我在 document.click 上解决这个误解的方法。

1. 在标签正文下一个标签之后添加到 html

   <代码><正文>;

   ...

2. 该标签的一些样式

   `#overlaySection {
     位置：固定；
     顶部：0；
     左：0；
     z 索引：1；
     宽度：100%；
     高度：100%；
     背景：rgba(255, 255, 255, 0);
     光标：指针；
     可见性：隐藏；
     不透明度：0；
     内容： ””;
   }
   #overlaySection.active {
    不透明度：1；
    可见性：可见；
   }`
   

3. 一些 JQuery 人员

   // 在文档单击时隐藏覆盖
$('#overlaySection').click(function(){
$(this).removeClass('active');
});

以及激活此叠加层的主要内容

$('.dropdown > span').click(function() {
    ...
    $('#overlaySection').addClass('active');
    ...
});

希望这种方法对某人有用。快乐编码！