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

White feathe

发布于 2021-12-08 14:24:52

8220

发布于 2021-12-08 14:24:52

大家都知道移动端的程序中，是没有点击事件的，只有 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;
    }
});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/03/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery