本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（52）——jquerymobile中的触控交互
当使用移动设备进行触控操作时，最常用的就是轻击、按住屏幕或者手势操作，jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。
一、轻击与按住
直接上代码（一切皆在代码中，细细品吧！）
-
>
-
<html>
-
<head>
-
<title>练习title>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width,
-
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
-
<link href="css/jquery.mobile-1.0.1.min.css"
-
rel="stylesheet" type="text/css"/>
-
<script src="js/jquery-1.6.4.js"
-
type="text/javascript" >script>
-
<script src="js/jquery.mobile-1.0.1.js"
-
type="text/javascript" >script>
-
<script type="text/javascript">
-
$('#page1').live('tap', function(){
-
$.mobile.changePage('#page2');
-
});
-
$('#page2').live('tap', function(){
-
$.mobile.changePage('#page1');
-
});
-
$('#page1').live('taphold', function(){
-
alert('taphold事件被触发');
-
});
-
$('#page2').live('taphold', function(){
-
$.mobile.changePage('#about');
-
});
-
script>
-
head>
-
<body>
-
<section id="page1" data-role="page">
-
<header data-role="header">
-
<h1>Tap事件处理h1>
-
header>
-
<div class="content" data-role="content">
-
轻击页面进入下一页<br/>
-
按住不放，打开关于对话框
-
div>
-
<footer data-role="footer">footer>
-
section>
-
<section id="page2" data-role="page">
-
<header data-role="header">
-
<h1>Tap事件处理h1>
-
header>
-
<div class="content" data-role="content">
-
轻击页面返回前一页
-
div>
-
<footer data-role="footer">
-
footer>
-
section>
-
<div id="abut" data-role="dialog">
-
<div data-role="header">
-
<h1>关于本程序h1>
-
div>
-
<div data-role="content">
-
演示轻击触控事件响应
-
div>
-
div>
-
body>
-
html>
tap：轻击事件
taphold:按住事件
二、轻扫
轻扫是指用手指或手写笔快速在屏幕上向左或向右快速滑动，会触发swipeleft事件或者swiperight事件。
-
>
-
<html>
-
<head>
-
<title>练习title>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width,
-
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
-
<link href="css/jquery.mobile-1.0.1.min.css"
-
rel="stylesheet" type="text/css"/>
-
<script src="js/jquery-1.6.4.js"
-
type="text/javascript" >script>
-
<script src="js/jquery.mobile-1.0.1.js"
-
type="text/javascript" >script>
-
<script type="text/javascript">
-
$('#page1').live('swiperight', function(){
-
$.mobile.changePage('#page2');
-
});
-
$('#page2').live('swiperight', function(){
-
$.mobile.changePage('#page1');
-
});
-
$('#page1').live('swipeleft', function(){
-
$('#lnkDialog').click();
-
});
-
$('#page2').live('swiperleft', function(){
-
$.mobile.changePage('#about');
-
});
-
script>
-
head>
-
<body>
-
<section id="page1" data-role="page">
-
<header data-role="header">
-
<h1>swipe事件处理h1>
-
header>
-
<div class="content" data-role="content">
-
向右滑动页面进入下一页<br/>
-
向左滑动页面，打开关于对话框
-
div>
-
<footer data-role="footer">footer>
-
section>
-
<section id="page2" data-role="page">
-
<header data-role="header">
-
<h1>swipe事件处理h1>
-
header>
-
<div class="content" data-role="content">
-
向右滑动页面进入前一页br/>
-
向左滑动页面，打开关于对话框
-
div>
-
<footer data-role="footer">
-
footer>
-
section>
-
<div id="abut" data-role="dialog">
-
<div data-role="header">
-
<h1>关于本程序h1>
-
div>
-
<div data-role="content">
-
演示swipeleft&swiperight触控事件响应
-
div>
-
div>
-
<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;">a>
-
body>
-
html>
上面代码中用到了一个技巧，在界面切换过程中如果需要改变切换效果，则必须使用超级链接了实现，将该链接的display属性设为none，在监听函数中调用click()方法执行界面切换，然后在链接中添加data-transition进行切换效果设置。
三、虚拟鼠标事件
|
事件
|
含义
|
|
vmouseover
|
触控或者滑动DOM容器之上
|
|
vmoseout
|
触控或者滑动离开
|
|
vmousedown
|
触摸或者按下
|
|
vmoseup
|
触摸结束或者鼠标按键释放
|
|
vclick
|
触摸结束或鼠标按键被释放
|
|
|
vclick事件通常在vmouseup事件后300ms触发
|
|
vmousecancel
|
触控事件中发起mousecancel事件时触发
|
|
......
|
......
|
|
......
|
......
|
-
>
-
<html>
-
<head>
-
<title>练习title>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width,
-
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
-
<link href="css/jquery.mobile-1.0.1.min.css"
-
rel="stylesheet" type="text/css"/>
-
<script src="js/jquery-1.6.4.js"
-
type="text/javascript" >script>
-
<script src="js/jquery.mobile-1.0.1.js" type="text/javascript" >script>
-
<script type="text/javascript">
-
$('#page1').live('vmouseup', function(event, ui){
-
alert("当前点击位置" + "\n" +
-
"\npageX:" + event.pageX + //当前HTML页面横坐标
-
"\npageY:" + event.pageY + //当前HTML页面纵坐标
-
"\nscreenX:" + event.screenX + //当前屏幕横坐标
-
"\nscreenY:" + event.screenY + //当前屏幕纵坐标
-
"\nclientX:" + event.clientX + //当前窗口区域横坐标
-
"\nclientY:" + event.clientY); //当前窗口区域纵坐标
-
});
-
script>
-
head>
-
<body>
-
<section id="page1" data-role="page">
-
<header data-role = "header">
-
<h1>vMouse事件处理h1>
-
header>
-
<div class="content" data-role="content">
-
轻击页面，显示点击位置
-
div>
-
<div style="height: 500px;">div>
-
内容底部
-
<footer data-role="footer">footer>
-
section>
-
body>
-
html>
阅读(854) | 评论(0) | 转发(0) |
