移动端touch事件-ontouchstart/ontouchmove/ontouchend

责编:menVScode 2018-01-09 21:39 阅读(566)

        移动端的三大事件

        手指按下:ontouchstart;手指移动:ontouchmove;手指抬起:ontouchend。

        注意:在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式 (addEventListener)。 

var div = document.getElementById('div1');

// div.ontouchstart = function(){ alert(1); }

div.addEventListener('touchstart',start);
div.addEventListener('touchmove',move);
div.addEventListener('touchend',end);

function start(){ console.log('按下'); }
function move(){ console.log('移动'); }
function end(){ console.log('抬起'); }

            pc上的事件比移动端的事件略慢,大概是在300ms左右。

var div = document.getElementById('div1');

div.addEventListener('mouseup',up);
div.addEventListener('touchend',end);

function up(){ console.log('鼠标抬起'); }
function end(){ console.log('抬起'); }

        移动端的点透问题:当上层元素发生点击的时候,下层元素若有点击行为(焦点)特性,在300ms之后,如果上层元素消失或者隐藏,目标点就会“漂移”到下层元素身上,就会触发点击行为。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
#div1{ width:200px; height: 200px; background: red; position: absolute; top:0; left:0; opacity: .5; }	
</style>
</head>
<body>
	<a href="http://menvscode.com" id="a">MVC前端网</a>
	<!-- <p id="p">点我呀~~</p> -->
	<div id="div1"></div>
	<script type="text/javascript">
		document.addEventListener('touchstart',function(ev){
			ev.preventDefault();
		});

		var div = document.getElementById('div1');
                var a= document.getElementById('a');
		div.addEventListener('touchend',end);
		function end(){
			this.style.display = 'none'; // 点击a标签对应的上层区域的地方,300ms之内会触发点透问题
		}
                a.addEventListener('touchstart',function(){ //阻止pc事件后,a标签的默认行为也被阻止了
		    window.location.href = 'http://www.menvscode.com';
	        });

		// var p = document.getElementById('p'); // 点击事件也会触发点透问题
		// p.addEventListener('touchstart',function(){
		// 	alert(1)
		// });
	</script>
</body>
</body>
</html>

        解决:1.下层不要使用有点击(焦点)特性的元素。2.阻止pc事件。

document.addEventListener('touchstart',function(ev){
    ev.preventDefault();
});

        移动端阻止pc事件的优点

        (1) IOS10下设置meta禁止用户缩放是不可行的。(使用阻止pc事件就可以在IOS10下禁止用户缩放)

        (2) 解决IOS10下溢出隐藏的问题。

        (3 禁止系统默认的滚动条、阻止橡皮筋效果

        (4)禁止长按选中文字、选中图片、系统默认菜单

        (5) 解决点透问题

        (6) 也阻止了焦点元素(input输入框)的焦点行为(想要正常使用:ev.stopPropagation()阻止冒泡)

txt.addEventListener('touchstart',function(ev){
    ev.stopPropagation();
});
标签: touch 移动端
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码