首頁 > web前端 > H5教程 > 主體

H5之12__觸摸與單擊:基本的事件處理

黄舟
發布: 2017-02-18 15:01:03
原創
1416 人瀏覽過

 在HTML5中,  如果基於滑鼠的介面互動是點擊, 觸控介面的基本互動方式就是輕觸.

一.  輕觸與點擊有相似之處,也有不同.
但是即使

但是即使觸控裝置(例如: 手機) 沒有滑鼠,它們的瀏覽器仍然會觸發滑鼠事件, click, mouseover,  mousedown 和mouseup 都會被觸發。

二.  行動瀏覽器有四種類型的觸控事件


touches 陣列 是一組觸控事件所產生的觸控物件,  觸控物件代表觸控螢幕的手指。

三. 處理觸控事件

第一種方式,使用瀏覽器支援的標準觸控事件, 看一個範例index.html :


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<title>Touch</title>
	<style type="text/css" media="screen">
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			text-align: center;
		}
		
		.button {
			font-size: 16px;
			padding: 10px;
			font-weight: bold;
			border: 0;
			color: #fff;
			border-radius: 10px;
			box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000;
			background: #ff3019;
			opacity: 1;
		}
		
		.active, .button:active {
			box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;
		}

		.hidden {
			display: none;
		}
	</style>
</head>
<body>
	<p id="touchme">
		<button class="button" id="toggle">切换图片</button>
		<p class="hidden" style="display: none">
			<p>Goldfinch by ibm4381 on Flickr</p>
			<a href="http://www.flickr.com/photos/j_benson/3504443844/" 
				title="Goldfinch by ibm4381, on Flickr">
				<img src="http://www.php.cn/" 
					width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>
<script type="text/javascript" charset="utf-8">
	var node = document.getElementById(&#39;toggle&#39;);
	
	function togglePicture(){
		var h = document.querySelector(".hidden");
		if(h.style.display == "none") {
			h.style.display = "block";
		} else {
			h.style.display = "none";
		}
	}
	
	node.addEventListener(&#39;touchstart&#39;, function(e){
		alert("touchstart");
		//阻止事件的默认行为导致按钮不会出现活跃状态(active)
//		e.preventDefault();
		e.target.className = "active button";
		togglePicture();
	});
	
	node.addEventListener(&#39;touchend&#39;, function(e){
		//e.preventDefault();
		e.target.className = "button";
	});
	
	node.addEventListener("click", function(e){
		alert("click");
	});
</script>
</html>
登入後複製


手機效果圖如下所示, 上會回應觸控事件,不會回應點擊事件,    在PC 瀏覽器上則相反



使用  addEventListener來  訂閱事件.  使用它可以定義何時觸發事件以及事件的行為.

還是仿照上個範例, 作些修改, 步驟如下:

1. 使用自訂事件

Eventreee

在這裡

需要四個參數,

 

該事件的名稱


該事件是否冒泡


該事件是否冒泡

詳細數據,  一個任意的數據,會在初始化事件時傳遞過去


2. 需要新增一個touchstart  監聽器,並且點擊(click) 仍然不可用。 因此要偵測是否支援觸控事件, 否則降為相容於使用滑鼠事件。

node.addEventListener("tap",  function(e){
    togglePictrue();
});
node.addEventListener("touchstart",  function(e){
     var tap = document.createEvent("CustomEvent");
    tap.initCustomEvent("tap",  true,  true,  null);
    node.dispatchEvent(tap);
});
登入後複製






通過這兩步,基本完成了需求。

完整程式碼如下, tap.html:

function addTapListener(node, callback) {
		
		node.addEventListener(&#39;tap&#39;, callback);
		
		//一开始 定义为鼠标 按下,抬起事件,这是为PC浏览器考虑的
		var startEvent = &#39;mousedown&#39;, endEvent = &#39;mouseup&#39;;
		
		//if touch events are available use them instead
		if (typeof(window.ontouchstart) != &#39;undefined&#39;) {
			
			//如果判断为触摸设备,改变为触摸开始、触摸结束事件
			startEvent = &#39;touchstart&#39;;
			endEvent   = &#39;touchend&#39;;
		}
		
		//开始事件
		node.addEventListener(startEvent, function(e) {
			var tap = document.createEvent(&#39;CustomEvent&#39;);
			tap.initCustomEvent(&#39;tap&#39;, true, true, null);
			node.dispatchEvent(tap);
		});	
		
		//结束事件
		node.addEventListener(endEvent, function(e) {
			var tapend = document.createEvent(&#39;CustomEvent&#39;);
			tapend.initCustomEvent(&#39;tapend&#39;, true, true, null);
			node.dispatchEvent(tapend);
		});
	}	
登入後複製


效果圖如下:

           



可以看到第二種方式:  自訂事件不比第一種方式的程式碼少, 但它更清晰地介紹了發生了什麼,  重要的是在桌上型電腦上無需改動即可使用。


 以上就是H5之12__觸摸與單擊:基本的事件處理的內容,更多相關內容請關注PHP中文網(www.php.cn)!


事件名稱  描述
touchmove接觸點改變
touchend 觸摸結束
觸摸結束
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板