摘要：问题封装的事件由和实现，事件在端无效使用中事件在中该版本的点透问题已经解决可以放心使用，但是端仍然无效。
一、问题描述
实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。
二、例子
下面通过多种方式来模拟感受点透：
<div class="tap">tap <div class="click">click
1、使用原生js
直接给两个盒子绑定点击事件：
var tap = document.querySelector(.tap);
var click = document.querySelector(.click);
//一、为tap添加touch事件 touch事件只是针对移动端，pc端无效
tap.addEventListener(touchstart,function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener(click,function(e) {
click.style.backgroundColor = "blue";
})在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。
实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。
下面通过多种方式来模拟感受点透：
<div class="tap">tap <div class="click">click
直接给两个盒子绑定点击事件：
var tap = document.querySelector(.tap);
var click = document.querySelector(.click);
//一、为tap添加touch事件 touch事件只是针对移动端，pc端无效
tap.addEventListener(touchstart,function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener(click,function(e) {
click.style.backgroundColor = "blue";
})在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。
问题1：点透
问题2：touch在PC端无效
问题3：click事件在移动端有延迟约300ms的问题（详细见移动端click延迟和tap事件）
封装的tap事件代码详见上一篇：移动端click延迟和tap事件
idcast.tap(tap,function(e){
tap.style.visibility = "hidden";
})
idcast.tap(click,function(e) {
click.style.backgroundColor = "blue";
})结果：移动端没有出现点透，但是PC端无效。
问题1：封装的tap事件由touchstart和touchend实现，touch事件在pc端无效
$(.tap).on("tap",function() {
$(this).hide();//zepto中tap事件在touch.js中
});
$(.click).on("click",function() {
$(this).css("backgroundColor","blue");
})该版本zepto的点透问题已经解决可以放心使用，但是PC端仍然无效。
综合上述：web想同时移动端和PC端呈现，又要解决点透问题，可以直接使用一个fastclick.js插件：fastclick
如下的使用：可以完美解决以上三者问题
if (addEventListener in document) {
document.addEventListener(DOMContentLoaded, function() {
FastClick.attach(document.body);//给body绑定attach事件，是body中所有的元素都添加了attach事件
}, false);
}
tap.addEventListener(click,function() {
$(this).hide();
})
click.addEventListener(click,function() {
$(this).css("backgroundColor","blue");
})当然不是拿来主义，而是充分利用各种工具以提高自己学习和工作的效率。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1400.html
摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。 移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么 你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...
摘要：移动端经常出现点透，至于怎么出现的请大家去看一下实现的源码。点透是什么你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件或打开链接。这个被定义为这是一个点透现象。 移动端经常出现点透，至于怎么出现的请大家去看一下zepto实现tap的源码。 1、点透是什么 你可能碰到过在列表页面上创建一个弹出层，弹出层有个关...
摘要：早期版本的的就是如此处理的，自定义事件在中触发，解决单击延时的问题。给按钮绑定事件事件执行自定义事件触发上的事件当然实际中肯定要放在其他的事件回调中，不然没办法响应用户操作。 click延时 在移动设备上按下手指单击，按先后顺序，依次会发生touchstart->-touchmove（如果有的话）>touchend->mousedown->mousemove（如果有的话）->mouse...
阅读 682·2023-04-25 19:43
阅读 3855·2021-11-30 14:52
阅读 3729·2021-11-30 14:52
阅读 3795·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3812·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6009·2021-11-29 11:00
