javascript - jquery 单击事件不会在 iPhone 中的按钮元素上触发

Question

使用:

• Visual Studio 2013
• MVC5
• jQuery 1.10.2

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

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

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

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

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

下面是我正在使用的标记和 jquery 代码的片段:

$(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;
});