<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--移动端的三大事件
手指按下:ontouchstart
手指移动:ontouchmove
手指抬起:ontouchend
注意:在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式。
pc上的事件要比移动端上的事件要慢,大概是在300s左右
-->
<div id="div1">1</div>
<script>
var div = document.getElementById("div1");
/*div.ontouchstart = function(){
alert(1)
}*/
div.addEventListener("touchstart",start);
div.addEventListener("touchmove",move);
div.addEventListener('touchend',end);
div.addEventListener('mouseup',up);
function start(){
console.log('按下')
}
function move(){
console.log("移动");
}
function end(){
console.log('抬起');
}
function up(){
console.log('鼠标抬起');
}
</script>
</body>
</html>
移动端事件
最新推荐文章于 2019-03-28 10:29:01 发布