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