[0009·js]移动端为一个元素同时添加点击事件与长按事件

移动端的操作一直以简单为宗旨,那么就涉及到需要为一个元素同时增加点击与长按事件,代码如下:

	//首先需要禁止页面上的默认长按事件
	document.body.onselectstart=document.body.oncontextmenu=function(){return false;};
	//长按初值
	var longClick = 0;
	//短按初值
	var shortClick = 0;
	//时间初值
	var timeout = 0;
	$('.demo').each(function(){ 
		var $this = $(this);
		//监听按下屏幕事件
		$this.on('touchstart', function(){ 
			longClick = 0;
			shortClick = 1;
			timeout = setTimeout(function() { 
				longClick = 1;
				shortClick = 0;
				//==触发成功时如何表现,这里可以写一些代码==//
			}, 300);  
		}); 
		//长按移动事件排除
		$this.on('touchmove', function(){ 
			clearTimeout(timeout);
			//==针对触发成功时如何恢复,这里可以写一些代码==//
			timeout = 0;
			e.preventDefault();	
		}); 	
		//监听离开屏幕事件		  
		$this.on('touchend', function(){ 
			clearTimeout(timeout);
			if(timeout != 0 && shortClick == 1 && longClick != 1)
			{
				//==业务代码==//					
			}else if(timeout != 0 && longClick == 1 && shortClick != 1 ){
				document.body.onselectstart=document.body.oncontextmenu=function(){};
				//==业务代码==//						
			}
			return false;
		});  
	});				

猜你喜欢

转载自blog.csdn.net/HoD_DoH/article/details/93380091
今日推荐