移动浏览器点击事件的问题

怼烎@ 2022-08-20 13:24 200阅读 0赞

大家都知道移动端的程序中，是没有点击事件的，只有  
touchstart、touchmove、touchend。

利用jquery这样写的话，也可以，但是当你点击按钮的单击事件时，将  
会等待大约300ms的时间。这是因为，浏览器是等着看，如果你是真正执  
行双击。

如下代码所示,就会延时300ms：
    $("#sid").click(function(){ 
       console.log(111);
    });
    
    
    ps:在移动浏览器端，你会发现，当你点击某个区域的点击事件时，你会
    发现，边框周围有个阴影一闪而过，如何解决？看下面

解决方案：（1）利用singleTap来实现

首先，要引入zepto.min.js文件
    
    $("#sid").on("singleTap",function(e){
            if(!$(e.target).hasClass("btn")){
                e.stopPropagation();
                console.log(111);
            }
    });
    
    ps：此时你在看看是否有所变化

插入点小知识：

Single tap跟press的区别

single tap是按一下，就一下，按了就拿起来
    press就是按，可以按一会，按一下，按很久，按到你开心~。。。。

介绍下按键：

press，release，single tap，double tap，triple tap
    
        press就是按么，
        release就是松开，
        single tap就是按一下， 
        double tap就是按两下，
        triple就是三下哈哈哈~~~

解决方案：（2）使用FastClick插件  
地址：[http://www.uedsc.com/fastclick.html][http_www.uedsc.com_fastclick.html]

解决方案：（3）点击和滑动之间有一个本质的区别就是 touchmove（mousemove），在手机端，只需要判定是否触发这一点即可：

[http_www.uedsc.com_fastclick.html]: http://www.uedsc.com/fastclick.html