• 触屏Tap模拟事件


    触屏的click因为有双击判断所以有200ms的延迟,zepto里的touch.js兼容不好所以tap也没法直接用。

    gibhub上有个fastclick太大了。

    自己用touched写个简单的模拟tap事件,并在内部加上e.preventDefault();阻止系统默认行为。

    	/*
    		模拟Tab事件
    		@obj:元素
    		@callback:回调函数
    	*/
    	function Tap(obj, callback){
    		document.body.addEventListener('touchend',function(e){
    			if(typeof callback == 'function' && obj==e.target){callback();}
    			//阻止“默认行为”
    		    e.preventDefault();
    		});		
    	}
    

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.box{ 100px;height: 100px;background: green;margin:5px;}
    	</style>
    </head>
    <body>
    	
    	<div class="box" id="box1"></div>
    	<div class="box" id="box2"></div>
    
    	<script>
    
    	/*
    		模拟Tab事件
    		@obj:元素
    		@callback:回调函数
    	*/
    	function Tap(obj, callback){
    		document.body.addEventListener('touchend',function(e){
    			if(typeof callback == 'function' && obj==e.target){callback();}
    			//阻止“默认行为”
    		    e.preventDefault();
    		});		
    	}
    
    	Tap(document.getElementById('box1'),function(){
    		console.log('tab1');
    	});
    
    	Tap(document.getElementById('box2'),function(){
    		console.log('tab2');
    	});
    
    	Tap(document.body,function(){
    		console.log('body');
    	});
    	</script>
    </body>
    </html>
    

      

  • 相关阅读:
    Linux常用命令大全
    YUM仓库服务
    Keepalived 双机热备
    VML
    CSS3选择器一
    lambda表达式详解
    将博客搬至CSDN
    html5本地数据库(一)
    疯狂的表单-html5新增表单元素和属性
    值类型与引用类型总结
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4558985.html
Copyright © 2020-2023  润新知