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;
}