jQuery Mobile 触摸事件
jQuery Mobile 触摸事件技术文档
前言
jQuery Mobile 是针对移动端 Web 应用开发的 jQuery 插件。它通过面向 iOS、Android、Windows Phone 等各种平台的大量测试工作,使得开发人员可以快速地搭建起一个属于移动端的Web应用。jQuery Mobile提供了一套完整的触摸事件支持,为移动端web应用提供了更高的交互体验。
触摸事件
jQuery Mobile 提供的触摸事件有以下几种:
tap
tap 事件为轻击事件,当手指按下并松开的时间在一秒钟以内且位移距离不超过10像素时触发。
$(selector).on("tap",function(){
//处理代码
});
taphold
taphold 事件为长按事件,当手指按下并超过750毫秒时触发。
$(selector).on("taphold",function(){
//处理代码
});
swipe
swipe 事件为滑动事件,当手指按下并移动一定距离后松开时触发。
$(selector).on("swipe",function(){
//处理代码
});
swipeleft
swipeleft 事件为向左滑动事件,当手指按下并向左移动一定距离后松开时触发。
$(selector).on("swipeleft",function(){
//处理代码
});
swiperight
swiperight 事件为向右滑动事件,当手指按下并向右移动一定距离后松开时触发。
$(selector).on("swiperight",function(){
//处理代码
});
vmouseover
vmouseover 事件为触摸移入事件,当手指没有离开屏幕并移动到某个元素上时触发。
$(selector).on("vmouseover",function(){
//处理代码
});
vmouseout
vmouseout 事件为触摸移出事件,当手指在某个元素上移动并离开屏幕时触发。
$(selector).on("vmouseout",function(){
//处理代码
});
事件对象
在触摸事件处理函数中,可以使用事件对象来获取有关触摸事件的信息。
事件对象包含以下几个属性:
type
:事件类型target
:事件对象pageX
:触摸点在页面中的横坐标值pageY
:触摸点在页面中的纵坐标值touches
:一个触摸点列表,每个触摸点都是一个对象,包含了有关该触摸点的信息。例如,touches[0].pageX 表示第一个触摸点在页面中的横坐标值。preventDefault()
:阻止默认事件
示例
接下来我们演示几个触摸事件的应用场景
拖动图片
<img src="image.png" id="dragImage">
<script>
var x, y;
$("#dragImage").on("vmousedown", function(e) {
x = e.pageX - parseInt($(this).css("left"));
y = e.pageY - parseInt($(this).css("top"));
$(document).on("vmousemove", function(e) {
$("#dragImage").css({
"left": (e.pageX - x) + "px",
"top": (e.pageY - y) + "px"
});
});
}).on("vmouseup", function() {
$(document).off("vmousemove");
});
</script>
菜单滑动展开
<div id="menu-container">
<a href="#" id="menu-link" class="closed">菜单</a>
<ul id="menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
<style>
#menu-container {
position: relative;
padding-top: 40px;
}
#menu-link {
position: absolute;
top: 0;
right: 0;
z-index: 999;
background: #333;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 1rem;
text-decoration: none;
}
#menu {
position: absolute;
top: 0;
right: -200px;
background: #f2f2f2;
border: 1px solid #ccc;
width: 200px;
height: 100%;
z-index: 998;
list-style: none;
padding: 10px;
margin: 0;
transition: right 0.3s ease-out;
}
#menu.open {
right: 0;
}
@media (min-width: 768px) {
#menu {
width: 300px;
}
}
</style>
<script>
$("#menu-link").on("click", function(e) {
e.preventDefault();
$("#menu").toggleClass("open");
});
$("body").on("vmousedown", function(e) {
if ($("#menu").hasClass("open")) {
if (!$(e.target).closest("#menu-container").length) {
e.preventDefault();
$("#menu").removeClass("open");
}
}
});
</script>
结论
jQuery Mobile 提供了一套完整的触摸事件支持,能够很好地满足移动端web应用开发的需求,并且方便易用、兼容性强。在实际开发中,可以根据需求选择适当的触摸事件来实现更加优秀的交互效果。