JavaScript 按钮不再适用于移动设备答案

【问题标题】：JavaScript button no longers works on mobileJavaScript 按钮不再适用于移动设备
【发布时间】：2019-03-08 18:09:24
【问题描述】：

所以我正在解决我们应用程序中的一个问题，但无法解决。我还没有编写基本代码，只能注入 CSS 和 Javascript。有一个非常基本的带有 ID 的 span 元素，下面是 Javascript 的 sn-p 基本上是说“如果单击带有 ID submitButton 的元素，则提交表单#createForm”。但是，在移动设备上它坏了，浏览器没有给出任何错误。

<form method="post" action="page.html" id="createForm">
    <span id="submitButton">Submit form</span>
</form>
<script> 
    $("#submitButton").on("click", function (event) {
        if (attributeEqualsDisabled($(this).attr('disabled'))) {
            return true;
        }
        $("#submitButton").attr('disabled', true);
        $('#createForm').submit();
    });
</script>

现在，即使在使用 Chrome 的“显示为 iphone”模式时，它也可以在桌面浏览器上完美运行。你可以点击按钮，一切正常。

但是，在移动 Safari 上以及将页面添加为 Web 应用时，该按钮不再起作用。当您按下它时，页面只是滚动到顶部并且什么都不做。我已经通过我的 Mac 进行了检查，一切看起来都很正常，与桌面上的完全一样。我什至可以通过控制台在我的 iPhone 上运行$("#submitButton").click();，它运行良好。

控制台中没有错误或警告。有没有人有任何解决此问题的建议？遗憾的是，我无法直接访问代码，因为一切都在 IP 锁定的服务器上。

有什么方法可以准确地查看单击按钮时发生的情况？我尝试了“时间轴”选项卡，但当我按下按钮时它什么也没有显示。

【问题讨论】：

我在 iOS 上遇到过与 click 事件类似的问题 - 这个线程帮了我大忙：stackoverflow.com/questions/3025348/…。特别是尝试在提交按钮上设置 CSS cursor: pointer;。
@RobinZigmond 你是救生员，工作就像一个魅力。谢谢！
谢谢，但只是传递不久前让我同样沮丧的答案！ :D

标签： javascript jquery mobile-safari web-developer-toolbar

【解决方案1】：

另一个用户的这个答案修复了它：https://stackoverflow.com/a/3026621/3461722

感谢 Robin Zigmond 为我指明了正确的方向。我在想是什么东西阻止了点击事件的触发，但它根本没有注意到它，因为我需要跟踪 touchstart 事件。

链接的答案确实提到通过将 cursor:pointer; 添加到带有 CSS 的按钮中找到了更好的解决方案，但是我的元素已经有了它，所以它显然在这种情况下不起作用。

添加此功能以检测手机上的点击：

$('#submitButton').bind( "touchstart", function(e){
    if (attributeEqualsDisabled($(this).attr('disabled'))) {
        return true;
    }
    $("#submitButton").attr('disabled', true);
    $('#createForm').submit();
});

【讨论】：