将 .click(） 方法与移动 Safari 一起使用

Using .click() Method with Mobile Safari

本文关键字：Safari 一起 移动 click 方法      更新时间：2023-09-26

我在使用移动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;
}

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

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

所以我最终通过将锚点移出更高级别的div 来让它工作。我不知道为什么这有效，但是如果您已经尝试了所有其他建议来处理移动野生动物园中的这种怪癖，那么这个建议可能会起作用。

相关文章：