2.移动端基础事件---touch事件

viewport设置

<meta name="viewport" content="width=device-width,user-scalable=no" charset="UTF-8">

背景颜色由粉色变成蓝色

touch事件,在chrome的模拟器下,部分版本 通过on 的方式来添加事件无效.

<style>        #box{            width: 100px;            height: 100px;            background:pink;        }    </style>    <script>        window.onload = function(){            var box = document.querySelector("#box");            // box.style.background = "blue";         }    </script>

touchStart

touchstart 手指触摸到 屏幕 ==mousedown

box.ontouchstart = function(){                this.style.background="red";            }

touchend

touchend 手指抬起的 时候 == mouseup

    box.ontouchend = function(){                this.style.background="orange";

touchmove

touchend 手指抬起的 时候 == mousemove

this.style.background="black";19.36s