Heim > Artikel > Web-Frontend > H5-12__Touch and Click: Grundlegende Ereignisverarbeitung

H5-12__Touch and Click: Grundlegende Ereignisverarbeitung

黄舟Original: 2017-02-18 15:01:031349Durchsuche

Wenn die mausbasierte Schnittstelleninteraktion in HTML5 das Klicken ist, ist die grundlegende Interaktionsmethode der Touch-Oberfläche das Tippen

1. Tippen und Klicken sind ähnlich, aber es gibt sie Unterschiede.

Auch wenn das Touch-Gerät (z. B. ein Mobiltelefon) keine Maus hat, löst der Browser dennoch Mausereignisse aus, und zwar Klicken, Mouseover, Mousedown und Mouseup ausgelöst werden.

2. Mobile Browser verfügen über vier Arten von Berührungsereignissen

Ereignisname

Beschreibung

事件名称	描述	包含touches 数组
touchstart	触摸开始	是
touchmove	接触点改变	是
touchend	触摸结束	是
touchcancel	触摸被取消	否

Enthält das Touches-Array

touchstart

Touch start

touchmove

Kontaktpunktänderung

Touchend

Touch-Ende

touchcancel

Touch wurde abgebrochen

Nein

Touches-Array ist eine Reihe von Berührungsobjekten, die durch Berührungsereignisse generiert werden. Die Berührungsobjekte stellen die Finger dar, die den Bildschirm berühren.

3. Berührungsereignisse verarbeiten

Die erste Möglichkeit besteht darin, die vom Browser unterstützten Standard-Berührungsereignisse zu verwenden, siehe Beispiel 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>

Das Rendering ist wie unten gezeigt, Hinweis: Es reagiert auf Berührungsereignisse auf Mobiltelefonen, aber nicht auf Klickereignisse Auf dem PC Browser Im Gegenteil

Die zweite Möglichkeit: Passen Sie das Ereignis an.

Verwenden Sie addEventListener, um das Ereignis zu abonnieren. Verwenden Sie es, um zu definieren, wann das Ereignis ausgelöst wird und wie sich das Ereignis verhält.

Immer noch folgend Nehmen Sie im vorherigen Beispiel einige Änderungen vor. Die Schritte lauten wie folgt:

1. Benutzerdefinierte Ereignisse verwenden

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);
});

Die initCustomEvent-Methode erfordert hier vier Parameter ,

● Der Name des Ereignisses

● Ob das Ereignis sprudelt

● Ob diese Veranstaltung abgesagt werden kann

● Detaillierte Daten, willkürlich Daten werden im Initialisierungsereignis angezeigt.

2. Ein Touchstart-Listener muss hinzugefügt werden, und Click (Click) ist immer noch nicht verfügbar. Daher muss festgestellt werden, ob Berührungsereignisse unterstützt werden. Andernfalls wird die Kompatibilität mit Mausereignissen beeinträchtigt.

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);
		});
	}

Der Code zum Aufrufen der obigen Methode lautet wie folgt:

addTapListener(node, function(e){
		e.preventDefault();
		e.target.className = &#39;active button&#39;;
		togglePicture();
});

Durch diese beiden Schritte sind die Anforderungen grundsätzlich erfüllt.

Der vollständige Code lautet wie folgt, tap.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://pic116.nipic.com/file/20161118/11902156_130258137000_2.jpg" 
					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";
		}
	}
	
	addTapListener(node, function(e){
		e.preventDefault();
		e.target.className = &#39;active button&#39;;
		togglePicture();
	});
	
	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);
		})
	}
	
	node.addEventListener(&#39;tapend&#39;, function(e){
		e.preventDefault();
		e.target.className = "button";
	});
	
</script>
</html>

Die Darstellung lautet wie folgt:

Wichtig ist, dass es ohne Modifikation auf einem Desktop-Computer funktioniert.

Das Obige ist der Inhalt von H5 12__ Touch and Click: Grundlegende Ereignisbehandlung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5 von 11__GeoLocation GeolokalisierungNächster Artikel：H5 von 11__GeoLocation Geolokalisierung

In Verbindung stehende Artikel

Mehr sehen