和 pc端是一样的 不过移动端 有几个 特殊的事件
比如touch 事件
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
tap事件
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
swipe事件
swipe：手指在屏幕上滑动时会触发
swipeLeft：手指在屏幕上向左滑动时会触发
swipeRight：手指在屏幕上向右滑动时会触发
swipeUp：手指在屏幕上向上滑动时会触发
swipeDown：手指在屏幕上向下滑动时会触发
这些事件不能用 $(xx).事件名() 去绑定 应该
$(document).bind('touchmove', function (event) {console.log('手指在屏幕上滑动了')
event.preventDefault()
})
解绑 用unbind
最近做移动端的项目，涉及触摸事件很频繁；我接下来介绍下三个基本的触摸事件：
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
下面是我刚写的一个小demo，可以复制体验下，测试的话打开浏览器的开发者工具的手机模式，点击屏幕移动就能体验到了，滚动鼠标是无效的哦~
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>ss</title>
<style>.sb{width: 100%height: 200pxbackground-color: red}</style>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 3000px">
<div ></div>
</div>
<script>
//touchmove 手指不放发生
$('body').on('touchmove',function(){
$('.sb').css({'display':'none'}) //隐藏div
})
//touchend 手指放开发生
$('body').on('touchend',function(){
$('.sb').css({'display':'initial','position':'fixed'}) //显示，固定div
})
</script>
</body>
</html>
首先使用jquery选择器获取到想要绑定click事件的img元素，然后可以直接绑定click方法，也可以通过bind方法绑定。这里详细介绍一下bind方法。<br><br>jquery 事件 - bind() 方法 —— 定义和用法<br> bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。<br><br>jquery 事件 - bind() 方法 ——将事件和函数绑定到元素<br> 规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。<br><br>jquery 事件 - bind() 方法——语法<br> $(selector).bind(event,data,function)<br><br>jquery 事件 - bind() 方法——参数描述<br> event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。<br> data <br>可选。规定传递到函数的额外数据。<br> function<br>必需。规定当事件发生时运行的函数。<br><br>实例：<br>//直接给所有img标签绑定click事件<br>$("img").click(function(){<br> alert('你点击了图片')<br>})<br><br>//使用bind方法绑定click事件<br>$("img").bind("click",function(){<br> alert('你点击了图片')<br>})<br><br>拓展：jquery给元素绑定事件的方法还有one、live、toggle、on(新增)等方法，详细可参考jquery官方文档。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）