touch.html (1565B)
1 <!DOCTYPE html> 2 3 <meta charset="utf-8" /> 4 <meta name="viewport" /> 5 <title>test</title> 6 7 8 <style> 9 div { 10 border: 1px solid red; 11 width: 100px; height: 100px; 12 } 13 </style> 14 15 <div data-is-delay="false"></div> 16 17 <script type="text/javascript"> 18 "use strict"; 19 const div = document.querySelector("div"); 20 let initX, initY; 21 22 div.style.transform = "none"; 23 div.style.backgroundColor = ""; 24 25 div.addEventListener("touchstart", function (evt) { 26 const touch = evt.changedTouches[0]; 27 initX = touch.pageX; 28 initY = touch.pageY; 29 }, true); 30 31 div.addEventListener("touchmove", function (evt) { 32 const touch = evt.changedTouches[0]; 33 const deltaX = touch.pageX - initX; 34 const deltaY = touch.pageY - initY; 35 div.style.transform = "translate(" + deltaX + "px, " + deltaY + "px)"; 36 }, true); 37 38 div.addEventListener("touchend", function (evt) { 39 if (!evt.touches.length) { 40 div.style.transform = "none"; 41 } 42 }, true); 43 44 div.addEventListener("mouseenter", function () { 45 div.style.backgroundColor = "red"; 46 }, true); 47 div.addEventListener("mouseover", function() { 48 div.style.backgroundColor = "red"; 49 }, true); 50 51 div.addEventListener("mouseout", function () { 52 div.style.backgroundColor = "blue"; 53 }, true); 54 55 div.addEventListener("mouseleave", function () { 56 div.style.backgroundColor = "blue"; 57 }, true); 58 59 div.addEventListener("mousedown", null, true); 60 61 div.addEventListener("mousemove", null, true); 62 63 div.addEventListener("mouseup", null, true); 64 65 div.addEventListener("click", null, true); 66 </script>