.click() 在移动设备上不起作用答案

【问题标题】：.click() not working on mobile.click() 在移动设备上不起作用
【发布时间】：2016-01-05 22:18:24
【问题描述】：

我正在开发一个移动应用程序，因此我将浏览器缩小到可以快速预览的大小。但是现在当我在我的手机上测试它时，水龙头没有在一个 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/

【问题讨论】：

点击事件在移动设备上不起作用，请使用“touchstart”。
那为什么它在另一个 DIV 中工作，我会试一试，让你知道谢谢
@abluejelly 不，他们在里面
@JonathanZúñiga 我试过绑定一个 touchstart 但同样的情况，适用于桌面，而不是移动设备。
你试过了吗？ .on('click touchstart', function(...

标签： javascript jquery html css jquery-mobile

【解决方案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/

【讨论】：

【解决方案2】：

尝试使用 jquery mobile 的 vclick 事件。此事件处理程序模拟移动设备上的“onclick”事件处理程序。

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

希望对你有帮助！

【讨论】：