小强HTML5手机发展之路（52）——jquerymobile触摸互动

2023-01-31 15:27:14

当使用移动设备的触摸操作，最常用的是点击、按住屏幕或手势，jQuery Mobile能够通过触摸事件绑定行为来响应用户的特定触摸。

一个、点击并按住

直接在代码（在代码中的一切，它使产品！）

<!DOCTYPE html>

<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事件。

<!DOCTYPE html>

<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事件时触发
......	......
......	......

<!DOCTYPE html>

<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>

码农公寓

相关文章