Question

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

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

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

任何有关导致此问题或解决方法的建议都将不胜感激！我已经在所有其他移动和桌面浏览器上测试了代码，但没有发现任何问题。谢谢！

编辑 - 这是HTML和相关的CSS：

HTML：

  <div id="login-div">
    <a class="login">Login</a>

    <!-- Login form -->
    <form id="login-form" action="action">
      <div>
        <input type="username" id="login-username" placeholder="email"/>
        <input type="password" id="login-password" placeholder="password"/>
        <input type="submit" id="login-button" value="Sign In"/>
        <div>
          {{> inputErrors}}
          <a class="lost_password">Lost Password?</a>
        </div>
      </div>
    </form>
  </div>

CSS：

#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;
}

Answer 1

尝试添加getContainer。 touchend在移动版Safari中有一些问题：

click

Answer 2

所以我最终通过将锚移出更高级别的div来实现这一点。我不知道为什么会这样，但是如果你已经尝试过所有其他建议来处理移动游猎中的这个怪癖，那么这个可能会有效。

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

2 个答案: