移动端一指或多指滑动时,禁止click事件。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38362455/article/details/82794668

今天在做腾讯地图的时候发现一个问题就是双指在方法或缩小地图的时候会触发地图上标记的click事件很不友好，用户体验感差。如下：

click的时候触发三个动作：
按先后顺序分别是：
touchstart //手指放到屏幕上时触发
touchmove //手指在屏幕上滑动式触发
click/touch
touchend //手指离开屏幕时触发
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素

	var mousedown_x;
	var mousedown_y;
	var d = 0;
	qq.maps.event.addDomListener(document.getElementById("container"),'touchstart',function(event){//  mousedown
		d = 0;
		mousedown_x = event.changedTouches[0].pageX;
		mousedown_y = event.changedTouches[0].pageY;
	});
	qq.maps.event.addDomListener(document.getElementById("container"),'touchmove',function(event){//mousemove
		d = Math.sqrt((mousedown_x - event.changedTouches[0].pageX) * (mousedown_x - event.changedTouches[0].pageX) + (mousedown_y - event.changedTouches[0].pageY) * (mousedown_y - event.changedTouches[0].pageY));
	});

	qq.maps.event.addDomListener(document.getElementById("container"),'mouseup',function(event){
	});
	//渲染 地图下方客户详情区域
	function custmer_baseInfo(customer){
		if (d>2){
			return
		}
	}

touchstart //手指放到屏幕上时触发 ：记录触发点的位子 x y 坐标
touchmove //手指在屏幕上滑动式触发：再次获取移动后的位子通过event对象得到 x y 坐标，再跟上一步的 x y 坐标
做一次运算得到手指滑动的偏移量。
最后在click事件中加入判断：可以根据不同场景，设置触发click事件可以触发的最小值。