移动浏览器点击事件的问题-蒲公英云

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

怼烎@ 2022-08-20 13:24 312阅读 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

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

var flag = false;
var $selector = $('#selectorID');
 $selector.on('touchstart touchmove touchend', function(event) { 
    switch(event.type) {
        case 'touchstart':
            falg = false;
            break;
        case 'touchmove':
            falg = true;
             break;
        case 'touchend':
            if( !falg ) {
                console.log('点击');
            } else {
                console.log('滑动');
            }
            break;
    }
});