jquery click 事件不会在 iPhone 中的按钮元素上触发

Question

使用：

• Visual Studio 2013
• MVC5
• jQuery 1.10.2

<button> 元素的 .click() 事件不会在 iPhone 上被调用。我的 MVC 项目中的所有 <button> 元素都是这种情况。它已经在多部 iPhone（iPhone 5 和 iPhone 6 设备）上进行了测试，因此这似乎不是一个孤立的问题。

它还在装有 Firefox、IE 和 Chrome 的 PC 上进行了测试，并且可以按预期工作。它还在 Android 设备和 Windows 手机上进行了测试，并且 .click() 事件可以正常工作。我无法确定这是 Safari、Safari Mobile、iPhone 还是 iOS 问题。

我在 Stack Overflow 上发现有关 iOS 设备的讨论有时不适用于本质上不可点击的元素，除非您添加 css 样式以将光标变为指针 (cursor : pointer)。但是，此解决方法仍然不适用于 <button> 元素。

我认为值得一提的是，当使用锚标记 (<a>) 并将其样式设置为类似于按钮时，.click() 事件在 iPhone 设备上触发。

有没有人经历过这种情况，如果有，知道解决方法吗？我知道我可以将所有<button> 元素更改为<a> 标签，如果我必须这样做，我会这样做。但我想了解为什么会发生这种情况，以及我是否正在做一些事情来导致这个问题。非常感谢。

下面是我正在使用的标记和 jquery 代码的 sn-p：

$(document).ready(function () {

    $('#taskContainer').on('click', '#btnSave', function (event) {
        console.log('save button clicked');
    });
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="taskContainer">
  <button id="btnSave" class="btn btn-primary">Save</button>
</div>

Answer 1

在点击触发结束时使用 return false：

$('#taskContainer').on('click', '#btnSave', function (event) {
    console.log('save button clicked');
    return false;
});