Javascript 在Mobile Safari中使用.click（）方法

我在使用mobile Safari时遇到了一个问题，jQuery的.click（）方法似乎没有启动。据我所知，我的代码似乎适用于所有其他移动浏览器。还有其他人遇到过这个问题吗？这似乎是一个常见的问题

我在锚上使用.click（）方法来显示登录表单：

$(".login").click(function(){
  $("#login-form").toggle();
  $("#login-username").focus();
  $(".login").toggle();
});

如果您对导致这种情况的原因或解决方法有任何建议，我们将不胜感激！我已经在所有其他移动和桌面浏览器上测试了代码，没有发现任何问题。谢谢

编辑-以下是HTML和相关CSS：

HTML:

---

尝试添加

touchend

<代码>单击在mobile Safari中有一些问题：

$(".login").on('click touchend', function(){
  $("#login-form").toggle();
  $("#login-username").focus();
  $(".login").toggle();
});

---

因此，我最终通过将锚从更高级别的div中移出来实现这一点。我不知道为什么这样做有效，但如果您尝试了所有其他建议来处理mobile safari中的这一怪癖，这一个可能会起作用。

请首先检查您的按钮是否没有被另一个外部分区覆盖。任何JSFIDLE都有更多的代码？我在上面添加了更多的代码。它由一个外部div覆盖。但这应该不是问题，不是吗？不走运：-/I意识到登录类实际上被包装在大约4个div中。这会对事件冒泡或其他什么产生影响吗？嵌套的深度可能并不重要。可能您受到本文第2部分的影响：-或者，这可能是一个样式问题，

.login

被一个不是

.login

子元素的元素覆盖。你可以通过给元素添加不同的背景色来检查这一点。我在这里发帖后发现了这篇文章，但作者的建议似乎对我没有帮助。我想知道一个覆盖，但它似乎也会导致其他移动浏览器的问题，这是没有的。我确实把锚从潜水舱里移了出来，但它确实起了作用。我只需要弄清楚如何在不将其嵌套在div中的情况下正确设置样式。

#login-div {
  margin: 5px -10px;
  text-align: right;
}

.login {
  vertical-align: -webkit-baseline-middle;
  color: #d4d4d4;
  font-family: "arial";
  font-size: 1rem;
  font-size: 16px;
  font-weight: 200;
}

#login-form {
  display: none;
  width: 100%;
}

#login-username:focus, #login-username:active, #login-password:focus, #login-password:active {
  -moz-box-shadow: 0px 0px 0.5rem 0px #8e8d8d;
  -webkit-box-shadow: 0px 0px 0.5rem 0px #8E8D8D;
  -o-box-shadow: 0px 0px 0.5rem 0px #8e8d8d;
  box-shadow: 0px 0px 0.5rem 0px #8E8D8D;
  outline-color: #8E8D8D;
}

$(".login").on('click touchend', function(){
  $("#login-form").toggle();
  $("#login-username").focus();
  $(".login").toggle();
});