zoukankan      html  css  js  c++  java
  • 移动端的事件点透及原因

    div定位在一个a标签上

    事件点透解决办法示例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta name="viewport" content="width=device-width,user-scalable=no" />
    	<meta charset="UTF-8">
    	<title>事件点透</title>
    	<style type="text/css">
    		#box {
    			position: absolute;
    			left: 0;
    			top: 0;
    			 300px;
    			height: 100px;
    			background: red;
    			opacity: 0.5;
    		}
    	</style>
    </head>
    
    <body>
    	<a href="http://www.baidu.com">300ms后别触发我click</a>
    	<div id="box"></div>
    	<script type="text/javascript">
    	/*
    		移动端支持鼠标事件,但是会有300ms的延迟
    		touchend->300ms->click
    		事件点透:当我们在屏幕按下时,会直接执行touch事件,然后延迟300ms,在点击的这个坐标点查找元素,如果元素有鼠标事件就执行
    		解决:e.preventDefault(); 	
    	*/
    
    		var box = document.querySelector('#box');
    		box.addEventListener('touchend', function (e) {
    			this.style.display = "none";
    			//e.preventDefault();
    		});
    
    	</script>
    </body>
    
    </html>
    

  • 相关阅读:
    用户调查报告
    beta冲刺总结
    beta冲刺第七天
    beta冲刺第六天
    beta冲刺第五天
    beta冲刺第四天
    beta冲刺第三天
    beta冲刺第二天
    beta冲刺第一天
    简单的密码管理器(Python)(待完善)
  • 原文地址:https://www.cnblogs.com/leee/p/7460702.html
Copyright © 2011-2022 走看看