javascript - .click() 不适用于移动设备

Question

我正在开发一个移动应用程序，所以我将浏览器缩小到可以快速预览的大小。但是现在当我在我的手机上测试它时，水龙头没有在一个 div 中注册，而是在另一个 div 中注册。

这是 div 中的两个无响应按钮，没有记录点击

<div id="loader">
    <img src="imgs/logo.png">
    <input type="text" placeholder="Email">
    <input type="password" placeholder="Password"><br></br>

    <button id="signup-btn">Sign Up</button>
    <button id="login-btn">Login</button><br>

    <div id="fb_connect">
        <img src="imgs/fb_connect.png">
        <a href="#">Connect with Facebook</a>
    </div>
...
</div>

这是这些按钮的 JQuery

$("#login-btn").click(function (event) {
    $("#loader").hide('slide', {
        direction: 'down'
    }, 250);
    $("#application").fadeIn(250);
});

$("#signup-btn").click(function (event) {
    $("#signup").show('slide', {
        direction: 'down'
    }, 250);
});

https://jsfiddle.net/z469k0n3/

Answer 1

尝试使用 jquery 的移动点击事件而不是点击来实现更高的兼容性:

  $("#login-btn").bind( "tap", tapHandler );
  $("#signup-btn").bind( "tap", tapHandler2 ); 

  function tapHandler( event ){
    $("#loader").hide('slide', {
        direction: 'down'
    }, 250);
    $("#application").fadeIn(250);
  }

  function tapHandler2( event ){
    $("#signup").show('slide', {
            direction: 'down'
        }, 250);
  }

https://api.jquerymobile.com/tap/