在 Mobile Safari 中使用 .click() 方法

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

尝试添加 touchend。 click 在移动版 Safari 中有一些陷阱：

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

Answer 2

所以我最终通过将锚点移出更高级别 div 来让它工作。我不知道为什么会这样，但是如果您已经尝试过所有其他建议来处理移动 safari 中的这个问题，那么这个可能会奏效。

在 Mobile Safari 中使用 .click() 方法

Using .click() Method with Mobile Safari

javascript

css

jquery

dom

mobile-safari