Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 599|回复: 0

前端插件--fastclick解决点透问题

[复制链接]
  • TA的每日心情
    奋斗
    6 天前
  • 签到天数: 745 天

    [LV.9]以坛为家II

    2041

    主题

    2099

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    704660
    发表于 2021-7-22 16:10:42 | 显示全部楼层 |阅读模式
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport"
     6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     7     <title>Title</title>
     8     <style>
     9         .box{
    10             width: 500px;
    11             height: 500px;
    12             border: 1px solid #ccc;
    13             position: relative;
    14         }
    15         .click {
    16             width: 300px;
    17             height: 300px;
    18             background-color: blue;
    19         }
    20         .tap{
    21             width: 200px;
    22             height: 200px;
    23             background-color: red;
    24             position: absolute;
    25             left: 0;
    26             top:0;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 <!--
    32 touch:只能在移动端响应
    33 click:延迟
    34 -->
    35 
    36 <!--移动端的点透:
    37 前提:
    38 1.必须为上面的元素添加touch相关事件,并且让其消失
    39 2.下面的元素必须能够响应延迟的click事件-->
    40 <div class="box">
    41     <div class="click"></div>
    42     <div class="tap"></div>
    43 </div>
    44 <!--<script src="./js/common.js"></script>-->
    45 <!--下面这个文件包含了touch事件-->
    46 <script src="./js/zepto.min.js"></script>
    47 <script src="./js/fastclick.js"></script>
    48 <script>
    49     /*var tap = document.querySelector(".tap");*/
    50     var tap = $(".tap");
    51     var click = document.querySelector(".click");
    52 
    53     /*tap.addEventListener("touchstart",function(){
    54         tap.style.visibility = "hidden";
    55     })*/
    56    /* click.addEventListener("click",function(){
    57         console.log(123);
    58     })*/
    59 
    60    /* /!*使用自己封装好的Tap事件*!/
    61     heima.tap(tap,function(e){
    62         tap.style.visibility = "hidden"
    63     });*/
    64 
    65     /*zepto在努力的解决点透的问题,但是没有完全解决,所以还是会出现点透的现象*/
    66     /*tap.on("tap",function(e){
    67         tap[0].style.visibility = "hidden"
    68     });
    69     click.addEventListener("click",function(){
    70         console.log(123);
    71     })*/
    72 
    73     /*fastclick:实现pc和移动端的单击事件的兼容,意味着使用fastclick来绑定事件,可以做到pc和移动都能响应
    74     * 况且它解决了:
    75     * 1.解决了touch事件在pc端无法响应的问题
    76     * 2.解决了click事件在移动端延迟的问题
    77     * 3.没有点透*/
    78 
    79     /*dom方式:*/
    80     if ('addEventListener' in document) {
    81         document.addEventListener('DOMContentLoaded', function() {
    82             /*如果对body绑定,那么意味着body下面的所有元素都会使用fastclick来进行单击事件的处理*/
    83             FastClick.attach(document.body);
    84         }, false);
    85     }
    86 
    87 
    88     tap[0].addEventListener("click",function(){
    89         tap[0].style.visibility = "hidden"
    90     })
    91     click.addEventListener("click",function(){
    92         console.log(123);
    93     })
    94 </script>
    95 </body>
    96 </html>

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-28 20:10 , Processed in 0.056689 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表