/*图片复选功能*/
$(".TabListItem .ForFun").click(function(){
//如果已经被选中
if($(this).hasClass("AddImg")){
$(this).removeClass("AddImg");
}
//如果没被选中
else{
$(this).addClass("AddImg");
}
});
/*touch事件*/
$(".ForFun").on({
touchstart: function(e){
timeOutEvent = setTimeout("longPress()",500);
e.preventDefault();
return false;
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function(e){
clearTimeout(timeOutEvent);
timeOutEvent = ShortLeave();
e.preventDefault();
return false;
}
})
});
可以绑定多个事件的。
例：
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="this.innerHTML='再见!'" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit",function(event){
$(".touch").on("tap",function(event){
$(".text").html("<span>敲击</span>").css({"color":"red","font-size":"500%","text-align":"center"});
});
$(".touch").on("swipeleft",function(event){
$(".text").html("<span>向左滑动</span>").css({"color":"purple","font-size":"500%","text-align":"center"});
});
$(".touch").on("swiperight",function(event){
$(".text").html("<span>向右滑动</span>").css({"color":"green","font-size":"500%","text-align":"center"});
});
});
</script>
<style>
div
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div data-role="page" data-theme="d">
<div data-role="content">
<div class="touch">
<div class="text" style="text-align:center;border:1px solid black;height:100px;"><br><br>请在框中敲击或滑动</div>
</div>
</div>
</div>
</body>
</html>
你看看这个例子