24

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() 在 iPhone 上无法正常工作。jquery但它不起作用。

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

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

4

6 回答 6

80

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

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault();
    alert('button1');
});
于 2013-02-26T18:01:11.473 回答
11

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

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

  1. 事件的目标元素是链接或表单域。
  2. 目标元素，或者它的任何祖先，直到但不包括<body>，都为任何鼠标事件设置了显式事件处理程序。此事件处理程序可能是一个空函数。
  3. 目标元素，或者它的任何祖先，包括文档，都有一个 cursor:pointer CSS 声明。
于 2016-04-07T08:34:00.357 回答
2

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

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;
}
于 2018-02-28T10:45:36.707 回答
1

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

#button1 {
    cursor: pointer;
}

或者，这可以内联添加：

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>
于 2019-06-20T15:39:59.743 回答
1

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

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

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

于 2018-03-20T09:27:50.073 回答
0

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

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

我用这个功能解决问题↓</p> 

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

.click两次可以解决我的问题

供你参考

于 2021-12-23T07:08:07.720 回答