Xiaoqiang의 HTML5 모바일 개발 도로(52) - jquerymobile의 터치 상호작용-H5 튜토리얼-php.cn

Xiaoqiang의 HTML5 모바일 개발 도로(52) - jquerymobile의 터치 상호작용

黄舟

풀어 주다： 2017-02-15 14:00:16

원래의

1510명이 탐색했습니다.

터치 작업을 위해 모바일 장치를 사용할 때 가장 일반적으로 사용되는 작업은 화면 누르기, 누르기 및 제스처 작업입니다. 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">
	$(&#39;#page1&#39;).live(&#39;tap&#39;, function(){
		$.mobile.changePage(&#39;#page2&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;tap&#39;, function(){
		$.mobile.changePage(&#39;#page1&#39;);
	});
	$(&#39;#page1&#39;).live(&#39;taphold&#39;, function(){
		alert(&#39;taphold事件被触发&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;taphold&#39;, function(){
		$.mobile.changePage(&#39;#about&#39;);
	});
</script>
</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>Tap事件处理</h1>
		</header>
		<p class="content" data-role="content">
			轻击页面进入下一页<br/>
			按住不放，打开关于对话框
		</p>
		<footer data-role="footer"></footer>
	</section>	
	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>Tap事件处理</h1>
		</header>
		<p class="content" data-role="content">
			轻击页面返回前一页
		</p>
		<footer data-role="footer">
		</footer>
	</section>
	<p id="abut" data-role="dialog">
		<p data-role="header">
			<h1>关于本程序</h1>
		</p>
		<p data-role="content">
			演示轻击触控事件响应
		</p>
	</p>
</body>
</html>

로그인 후 복사

tap: 탭 이벤트

taphold: 길게 누르기 이벤트

2. 스와이프

스와이프는 손가락이나 손으로 쓰는 것을 말합니다. 펜이 화면에서 왼쪽이나 오른쪽으로 빠르게 미끄러지면 왼쪽으로 밀기 이벤트 또는 오른쪽으로 밀기 이벤트가 트리거됩니다.

<!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">
	$(&#39;#page1&#39;).live(&#39;swiperight&#39;, function(){
		$.mobile.changePage(&#39;#page2&#39;);
	});
	$(&#39;#page2&#39;).live(&#39;swiperight&#39;, function(){
		$.mobile.changePage(&#39;#page1&#39;);
	});
	$(&#39;#page1&#39;).live(&#39;swipeleft&#39;, function(){
		$(&#39;#lnkDialog&#39;).click();
	});
	$(&#39;#page2&#39;).live(&#39;swiperleft&#39;, function(){
		$.mobile.changePage(&#39;#about&#39;);
	});
</script>
</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>swipe事件处理</h1>
		</header>
		<p class="content" data-role="content">
			向右滑动页面进入下一页<br/>
			向左滑动页面，打开关于对话框
		</p>
		<footer data-role="footer"></footer>
	</section>	
	<section id="page2" data-role="page">
		<header data-role="header">
			<h1>swipe事件处理</h1>
		</header>
		<p class="content" data-role="content">
			向右滑动页面进入前一页br/>
			向左滑动页面，打开关于对话框
		</p>
		<footer data-role="footer">
		</footer>
	</section>
	<p id="abut" data-role="dialog">
		<p data-role="header">
			<h1>关于本程序</h1>
		</p>
		<p data-role="content">
			演示swipeleft&swiperight触控事件响应
		</p>
	</p>
	<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
</body>
</html>

로그인 후 복사

위 코드에서는 인터페이스 전환 과정에서 전환 효과를 변경해야 하는 경우 하이퍼링크를 사용하여 구현해야 합니다. 링크의 표시 속성이 없으면 청취 함수에서 click() 메소드를 호출하여 인터페이스 전환을 수행한 다음 링크에 데이터 전환을 추가하여 전환 효과를 설정합니다.

3. 가상 마우스 이벤트

事件	含义
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">
	$(&#39;#page1&#39;).live(&#39;vmouseup&#39;, 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>
		<p class="content" data-role="content">
			轻击页面，显示点击位置
		</p>
		<p style="height: 500px;"></p>
		内容底部
		<footer data-role="footer"></footer>
	</section>
</body>
</html>

로그인 후 복사

위는 Xiaoqiang의 HTML5 모바일 개발 경로입니다(52 ). ——jquerymobile의 터치 상호작용 내용에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!