案例
<body>
<div id="a"></div>
<div id="b"></div>
<!-- <div class="haha"></div> -->
<div class="zhe"></div>
<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script src="./zepto.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
$(".zhe").tap(function () {
// setTimeout(function () {
$(this).hide()
// }.bind(this),350)
})
// $(".haha").click(function () {
// $(this).hide()
// })
$("#a").click(function () {
$(this).css("background",'blue')
})
});
</script>
</body>
只把body部分写下来就行了 也有注释的内容
1. 上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
这个比较好理解 使用同一种事件即可
2. 缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
$(".zhe").tap(function () {
// setTimeout(function () {
$(this).hide()
// }.bind(this),350)
})给上面的遮罩层加一个缓慢动画 即可解决问题 当然也有缺点 例如和设计不符
3. 使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
在最上面 和 下面的div中间再来一个div 即可
4. 使用fastclick
FastClick.attach(document.body); 引入zepto.js即可
浙公网安备 33010602011771号