手機端TOUCH

時間 2019-11-20

標籤手機 touch 简体版

原文原文鏈接

client / clientY：// 觸摸點相對於瀏覽器窗口viewport的位置html

pageX / pageY：// 觸摸點相對於頁面的位置canvas

screenX /screenY：// 觸摸點相對於屏幕的位置瀏覽器

identifier： // touch對象的unique IDapp

event.preventDefault();// 阻止瀏覽器默認事件，重要iphone

touchstart: // 手指放到屏幕上的時候觸發ide

touchmove: // 手指在屏幕上移動的時候觸發scala

touchend: // 手指從屏幕上拿起的時候觸發orm

touchcancel: // 系統取消touch事件的時候觸發。至於系統何時會取消，不詳。。htm

<div style='height:500px;width:100%; border:1px solid #000;' id='canvas'>對象

var canvas = document.getElementById('canvas');

function touchStart(event){

event.preventDefault();

alert(123)

}

function touchMove(event){

event.preventDefault();

alert(456)

}

function touchEnd(event){

event.preventDefault();

alert(789)

}

canvas.addEventListener("touchstart", touchStart, false);

canvas.addEventListener("touchmove", touchMove, false);

canvas.addEventListener("touchend", touchEnd, false);

canvas.addEventListener("touchCancel", touchCancel, false);

</script>

EG:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

</head>

<style>

*{padding:0px;margin:0px; text-align:center;}

.spirit { /* 方塊的class名稱*/

position: absolute;

width: 50px;

height: 50px;

}

</style>

<body>

/*單指拖動*/

var obj = document.getElementById('id');

obj.addEventListener('touchmove', function(event) {

// 若是這個元素的位置內只有一個手指的話

if (event.targetTouches.length == 1) {

　　　　 event.preventDefault();// 阻止瀏覽器默認事件，重要

var touch = event.targetTouches[0];

// 把元素放在手指所在的位置

obj.style.left = touch.pageX-25 + 'px';

obj.style.top = touch.pageY-25 + 'px';

}

}, false);

</script>

</body>

</html>

相關標籤/搜索

每日一句

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