移动端的“点透”问题,这篇博文有较好的说明:
http://www.cnblogs.com/zldream1106/p/3670988.html
移动端的事件触发顺序: touchstart -> touchend -> click
通常的情况是:
1. A区域是一个浮层,绑定touchstart/touchend事件,事件函数将A区域隐藏。
2. 点击发生的位置在B区域上方,而B区域恰好能够捕捉click事件(例如原生的a标签),从而被触发。
3. 这种 在A区域点击,却“透过”A区域,导致B区域也触发 click 事件的情况,我们称之为“点透”。
所以,避免“点透”的处理方法是:
1. 在A区域的touchstart/touchend事件,调用 e.preventDefault()方法,阻止click事件的继续触发。
2.A区域使用 click事件,而不是 touchstart/touchend事件,从而click事件在这个时候已经被生成处理。
3. 使用fastclick(https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js)来统一处理。
其实 fastclick的原理同1。它主要是在 body上绑定监听事件,然后做出判断,是否需要调用 preventDefault()来处理。
=================================================
以下则是我的实验测试。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="telephone=no" name="format-detection" />
<title>移动端点透问题</title>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<style>
*{
margin: 0px;
padding:0px;
}
#div3,#div1{ /*灰色半透明遮盖层A*/
width: 300px;
height: 300px;
background-color: rgba(0,0,0,0.25);
}
#div2{ /*黄色内容层B*/
width: 240px;
height: 240px;
background-color: yellow;
position: absolute;
left: 30px;
top: 30px;
z-index: -1;
}
#div3{
background-color: rgba(255,0,0,0.25);
}
#console{ /*绿色状态输出框*/
border: 1px solid green;
position: absolute;
top: 300px;
width: 100%;
}
</style>
</head>
<body>
<div id="div1" ></div>
<div id="div2" style="display:none">
<a href="javascript:alert(99)">www.baidu.com</a>
</div>
<div id="console"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
//fastclick的解决方式:
// FastClick.attach(document.body);
}, false);
var div1 = document.getElementById("div1");
var div2 = document.getElementById('div2');
var con = document.getElementById('console');
function createDiv3(){
var div3 = document.getElementById("div3");
if(!div3){
$(document.body).append($('<div id="div3"></div>'));
}
}
function handle(e){
var tar = e.target,eve = e.type;
var ele = document.createElement("p");
ele.innerHTML = "target:"+ tar.id + " event:" + eve ;
con.appendChild(ele);
if(tar.id === "div1"){
div1.style.display = "none";
}
div2.style.display = "block";
// createDiv3(); 搞一个层再次遮盖DIV2,也可以“阻止”问题的发生。
//阻止生成 click事件。
//e.preventDefault();
}
div1.addEventListener("touchend",handle);
//div1.addEventListener("touchstart",handle);
//这是事件不会被
div2.addEventListener("touchend",handle);
//click事件才是【点透】的原因
div2.addEventListener("click",handle);
//貌似最新的 zeptojs V1.6也没有处理该问题哦。
//$(document.body).on('tap',handle);
</script>
</body>
</html>
fastclick的核心代码截图:
- 大小: 83 KB
- 大小: 48.6 KB
分享到:
相关推荐
移动端当弹出遮罩层滚动时,底部禁止滚动,完美解决穿透问题
主要介绍了HTML实现移动端固定悬浮半透明搜索框的相关资料,需要的朋友可以参考下
高职院校Illustrator课程信息化教学的探索与实践——以移动端APP常用元素——透明图标制作为例.pdf
透视C#核心技术:系统架构及移动端开发书中源码
透视c#核心技术:系统架构及移动端开发 视频教学文件
七彩绚丽背景透明css3模板_七彩 透明 css3 html layout 简单_html网站模板_网页源码移动端前端.rar
灰色透明简洁的CSS英文模板_透明 简洁 英文_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
透明导航条网上花店商城模板_透明 导航 花店 商城 企业 花 灰色 二栏 网店_html网站模板_网页源码移动端前端_.rar
炫光透明的网页模板_透明 炫光 导航 光 黑色 七彩 渐变_html网站模板_网页源码移动端前端_H5模板_自适应响应.rar
简洁透明网格css模板是一款固定背景的透明简洁css网站模板。_html网站模板_网页源码移动端前端_H5模板_自适应.rar
半透明邮件订阅模板是一款半透明背景风格的css网站正在建设邮件订阅模板下载。_html网站模板_网页源码移动端前端_H.rar
漂亮的绿色透明博客模板4730_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
手机半透明菜单企业微官网_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
响应式半透明背景个人blog_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
紫色星光梦幻女性网页模板_紫色 星光 女性 梦幻 整站 炫彩 幻灯 简洁 交友 透明_html网站模板_网页源码移动端.rar
透明黑色精品设计师html模板下载6940_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
灰色低沉高斯透明背景CSS模板_灰色 高斯模糊 低沉 透明 简洁清爽 css 整站_html网站模板_网页源码移动端前.rar
黑色透明大气的恋爱交友个人博客模板4460_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
透明高斯黑色背景博客响应式手机模板2615_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip