SOURCE

console 命令行工具 X clear

                    
>
console
var box = document.querySelector('.box');

function touchstart(ev) {
    box.style.backgroundColor = "#00ff00";
    console.log('start', ev);
}

function touchmove(ev) {
    box.style.backgroundColor = "#00ffff";
    ev.preventDefault();
    console.log('move', ev);
}

function touchend(ev) {
    box.style.backgroundColor = "#3b98e0";
    console.log('end', ev);
}
//触摸屏拖拽事件
box.addEventListener('touchstart', touchstart, false);
box.addEventListener('touchmove', touchmove, false);
box.addEventListener('touchend', touchend, false);

var touchmoveHolder;
function mousedown(ev) {
    box.style.backgroundColor = "#00ff00";
    console.log('start', ev);
}

function mousemove(ev) {
    box.style.backgroundColor = "#00ffff";
    ev.preventDefault();
    console.log('move', ev);
}

function mouseup(ev) {
    box.style.backgroundColor = "#3b98e0";
    console.log('end', ev);
}

//触控板拖拽事件
box.addEventListener('mousedown', function (ev) {
    touchstart.call(this, ev);
    touchmoveHolder = box.addEventListener('mousemove', touchmove, false);
    box.addEventListener('mouseup', function (ev) {
        touchend.call(this, ev);
        box.removeEventListener('mousemove', touchmove, true);
        box.removeEventListener('mouseup', touchmove, true);
    }, false);
    box.addEventListener('mouseleave', function (ev) {
        box.removeEventListener('mousemove', touchmove, true);
        touchend.call(this, ev);
    }, false);
}, false);
<div class="box"></div>
html,
body {
    height: 100%;
    overflow: hidden;
}

.box {
    width: 200px;
    height: 200px;
    background-color: #3b98e0;
}