移动开发学习touchmove

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>touchmove</title>

<style>

#tm{

    position: absolute;

    top: 100px;

    left: 100px;

    width: 100px;

    height: 30px;

    background-color: blue;

    text-align: center;

    line-height: 30px;

    color: white;

}

</style>

</head>

<body>

<div id="tm">touchmove</div>

<script>

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

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

    obj.style.backgroundColor = 'red';

});

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

    obj.style.backgroundColor = 'blue';

    obj.innerHTML = 'touchmove';

});

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

    event.preventDefault();

    var touch = event.targetTouches[0];

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

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

    obj.innerHTML = 'x:' + touch.pageX + ', y:' + touch.pageY;

}, false);

</script>

</body>

</html>
巴特西

移动开发学习touchmove

最新文章

热门文章
