onclick事件在移动设备上的函数内不起作用?

时间:2015-08-24 01:48:27

标签: javascript jquery twitter-bootstrap jquery-mobile

这是我的inline onclick事件。以这种方式编写时,它既适用于移动设备,也适用于PC:

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Open+Sans+Condensed:300|Limelight">
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
   <form class="form-inline" method="post" action="">
   <span><a id="sp-login" style="cursor:pointer;">Login Here</a></span>
   <span> or <a id="sp-signup" style="cursor:pointer;">Create an Account</a></span>
   <input class="form-control" style="width:100%;display:none;" type="text" name="username" id="in-user" placeholder="Username" type="text"/>
   <input class="form-control" style="width:100%;display:none;" type="password" name="password" id="in-pass" placeholder="Password"/>
   <input class="form-control" style="width:100%;display:none;" type="email" name="email" id="in-email" placeholder="your@email.com (For Unique Key)"/>
   <button type="submit" name="submit" value="login" class="btn btn-sm btn-info" style="display:none;width:210px;" id="in-login">Login</button>
   <button type="submit" name="submit" value="register" class="btn btn-sm btn-warning" style="display:none;width:210px;" id="in-signup">Sign Up</button>
   </form>
   <script>
   $(document).ready(function() {
       $('#sp-login').on('click touchstart', function() {
         $('#in-user').show(); $('#in-pass').show(); $('#in-login').show(); $('#in-email').hide(); $('#in-signup').hide();
     }); 

       $('#sp-signup').on('click touchstart', function() {
         $('#in-user').show(); $('#in-email').show(); $('#in-signup').show(); $('#in-pass').show(); $('#in-login').hide();
     });
   });
   </script>

它仅适用于PC,而不适用于移动设备。

我的jQuery版本是2.0.0。如果它改变了什么,我使用的是Bootstrap版本3.3.5。

1 个答案:

答案 0 :(得分:3)

请试试这个:

$(document).on('touchstart click', '.myBtn', function(event){
        event.stopPropagation();
        event.preventDefault();
        if(event.handled !== true) {

            // Do your magic here.

            event.handled = true;
        } else {
            return false;
        }
});