这是我的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。
答案 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;
}
});