第六課 touch事件

時間 2019-11-13

標籤第六 touch 事件简体版

原文原文鏈接

1.移動端頁面在PC上瀏覽時，限制寬度的方法：html

2.移動端頁面切換設備時自動刷新頁面的方法：spa

3.touch事件scala

　　touchstart：當手指觸摸屏幕時觸發。經過addEventListener添加移動端事件。htm

　　touchemove：當手指在屏幕上滑動時，連續觸發。對象

　　touchend：當手指從屏幕上移開時觸發。blog

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		#box{
			border: 10px solid black;
			width: 300px;
			height: 300px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script>
	var box = document.getElementById("box");
	box.addEventListener("touchstart",function(event){
		event.preventDefault();
		box.style.backgroundColor = "pink";
	},false)
	box.addEventListener("touchmove",function(event){
		event.preventDefault();
		box.style.backgroundColor = "blue";
	},false)
	box.addEventListener("touchend",function(event){
		event.preventDefault();
		box.style.backgroundColor = "green";
	},false)
	</script>
</body>
</html>

4.touch事件對象事件

　　touches：當前屏幕上全部觸摸點的列表ip

　　targetTouches：當前對象上全部觸摸點的列表
get

　　changedTouches：涉及當前事件的全部觸摸點的列表it

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>test</title>
    <style>
    #box {
        border: 10px solid black;
        width: 200px;
        height: 200px;
        font-size: 20px;
        padding: 50px;
    }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
    // touch事件對象
    var box = document.getElementById("box");
    box.addEventListener("touchstart", function(event) {
        event.preventDefault();
        box.innerHTML = "當前屏幕上的手指"+event.touches.length+"<br/>當前對象上的手指"+event.targetTouches.length+"<br/>涉及當前事件的手指"+event.changedTouches.length;
    }, false)
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。