StarSky1/blog

当li标签被多次点击时,如何限制用户触发多次点击效果

Opened this issue · 0 comments

今天开发时,遇到一个需求,要求不管单击还是双击还是多次点击快捷回复时会话框只需要出现一条添加快捷语句。
于是,经过一番百度查找,费尽千辛万苦,终于在这个论坛上找到了以下两个解决方法。
论坛:Jquery如何监听click事件点击的次数 地址:http://www.dewen.net.cn/q/13040

方法一:通过setTimeout方法阻止用户5秒内多次点击

var ata_lock=false,ata_time=5*1000;
function appendTextArea(ele) {
    if(ata_lock){
        layer.msg(ata_time/1000+'秒内请不要多次点击!', {
            icon: 7,
            time: 2000 //2秒关闭(如果不配置,默认是3秒)
        }, null);
        return;
    }//如果未解锁直接return;
    ata_lock=true;//锁定
    setTimeout(function(){  // 5秒后解锁
        ata_lock=false;
    },ata_time);
    //这里写你要做的事
    document.getElementById("send_msg_text").value = document.getElementById("send_msg_text").value + ele.getAttribute("title");
}

方法二:通过计算第二次点击与第一次点击时间间隔是否小于6秒,阻止用户多次点击

var times = 0;//点击次数
var preClickTime ;//上一次点击的时间(毫秒)
var currentClickTime;//当前点击时间
function appendTextArea(ele) {
    if(times === 0){
        preClickTime = new Date().getTime();//首次点击的时间
        times ++;
        //alert("当前点击次数:"+times);
        document.getElementById("send_msg_text").value = document.getElementById("send_msg_text").value + ele.getAttribute("title");
        return;
    }
    currentClickTime = new Date().getTime();
    if((currentClickTime - preClickTime) <= 3000) {//如果是3秒内重复点击
        var diff=(currentClickTime - preClickTime);
        diff=3-Math.floor(diff/1000);
        //layer.msg("亲,您的点击速度过快...,请"+diff+"秒后再试",{icon: 7,time: 2000});
        return;
    }

    times ++ ;
    preClickTime = currentClickTime;
    //alert("当前点击次数:"+times);
    //这里写你要做的事
    document.getElementById("send_msg_text").value = document.getElementById("send_msg_text").value + ele.getAttribute("title");
}

记录下来,方便下次遇到同样问题时及时处理,也提供给有同样需求的开发者一个思路。