jquery.click() 在 iOS 中不起作用答案

【问题标题】：jquery.click() not working in iOSjquery.click() 在 iOS 中不起作用
【发布时间】：2013-02-12 07:15:35
【问题描述】：

HTML：

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS：

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

现在，该脚本在我的 PC 浏览器上运行良好，但在 iOS 上却无法运行。我也尝试过这个解决方案：$(document).click() not working correctly on iPhone. jquery 但它不起作用。

我在 jQuery 1.8.3 上使用，没有 jQuery Mobile（我不喜欢）。

有人可以帮我解决这个问题吗？

【问题讨论】：

它应该可以正常工作，但既然你说它不行：试试$('#button1').on('click touch', function() {...})。
刚刚在我的 iphone 上测试过，它工作正常。
我认为真正的问题是您将一对<a> 标签包裹在一些<div>s 周围。这不应该是非法的，但有些浏览器可能会拒绝。

标签： jquery ios

【解决方案1】：

尝试给按钮添加一个指针光标，并使用.on来绑定点击事件。

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault();
    alert('button1');
});

【讨论】：

移动触摸屏没有光标。而你的JS字面上就相当于调用.click()； jQuery 在内部将一个转换为另一个。
有趣。有参考吗？
我之前也遇到过这个问题，试着做这样的事情。幸运的是，它有效。
我不知道为什么会这样（或者实际上为什么 .on('click'... 对我不起作用）但它确实有效
令我惊讶的是，这个答案是正确的。添加“光标：指针”实际上可以区分可点击和不可点击。

【解决方案2】：

我遇到了这个： http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

简而言之，iOS 浏览器需要满足以下条件之一才能从触摸事件中生成点击事件：

事件的目标元素是链接或表单域。

目标元素或它的任何祖先元素，直到但不包括<body>，都为任何鼠标事件设置了显式事件处理程序。此事件处理程序可能是一个空函数。

目标元素或它的任何祖先（直到并包括该文档）都有一个光标：指针 CSS 声明。

【讨论】：

在页面环绕元素上添加 onclick="" 对我有用。在该元素上设置style="cursor: pointer" 也有效，但由于此页面并非仅限移动设备，因此对于桌面用户来说这不是一个很好的解决方案。
都不适合我...难以置信...

【解决方案3】：

一般的解决方案可能是这样的：

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}

【讨论】：

【解决方案4】：

Yacuzo 的回答是最详尽的。但我想添加第四招（我最喜欢的）：

$('div:first').on('click', $.noop);

第一个 div 是否是目标元素的父级并不重要！

【讨论】：

【解决方案5】：

解决此问题的最简单方法是在您定位的元素的样式 (CSS) 中添加 cursor: pointer;。

#button1 {
    cursor: pointer;
}

或者，这可以内联添加：

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>

【讨论】：

【解决方案6】：

$('#button1').css('cursor','pointer');

此功能不适用于cordova 10.0、Xcode 13.2

我用这个功能解决问题↓

document.getElementById('chatpage').click();
document.getElementById('chatpage').click();

.点击两次可以解决我的问题

供您参考

【讨论】：