js html 点击事件 关于click事件和mouse事件冲突问题,购物车长按快速加,单击单加

2 篇文章 1 订阅

关于click事件和mouse事件冲突问题


今天在写购物车的时候,发现一个小问题,我想要在商品数量加到数据库的总数的时候将增加按钮禁用,刚开始只写一个点击事件,一次一次的点太慢,就想写一个鼠标按下让他快速增加的效果,但是在使用mousedown事件和click事件的时候发生了冲突。解决思路和代码如下:

在定时器中先定义一个值,用来判断按下后的时间,即设置50毫秒的定时器,在每一次执行时让这个值自增一(这个值的大小乘以定时器设置的时间就是要延迟的时间),最后将这个值作为条件,如果大于这个值,则执行程序,未大于返会return。这样就会区分点击和长按。

    //设置定时器
    let time1;
    let time2;
    //给加减按钮添加点击事件
    cliclj();
    function cliclj() {
        $('.jia').click(function(){
        if(datas[$(this).attr('index')].num < datas[$(this).attr('index')].goods_number){
            datas[$(this).attr('index')].num++;
            //将localstorage中的数据重写
            localStorage.setItem('cart',JSON.stringify(datas));
            $(this).parent().find('.buynum').html(datas[$(this).attr('index')].num);
        }else{
            //禁用增加按钮
            $('.jia').prop('disabled');
        }
    })
    }
    //鼠标按下快速加
    $('.jia').on('mousedown',(function(){
            //先将点击事件去掉
            $('.jia').off('click');
            //计数,让按下效果到达2s后开始
            let tt=0;
            time1 = setInterval(()=>{ 
                tt++;
                if(tt>40){
                    if(datas[$(this).attr('index')].num < datas[$(this).attr('index')].goods_number){
                        datas[$(this).attr('index')].num++;
                        $(this).parent().find('.buynum').html(datas[$(this).attr('index')].num);
                    }else{
                        $('.jia').prop('disabled');
                    }
                }else return;
             },50)

    }))
    //鼠标抬起停止
    $('.jia').on('mouseup',(function(){
        clearInterval(time1);
        //将localstorage中的数据重写
        localStorage.setItem('cart',JSON.stringify(datas));
        //再次添加点击事件
        cliclj();
    }))

    clickjian();
    function clickjian() {
        //给减按钮添加点击事件
    $('.jian').click(function(){
        if(datas[$(this).attr('index')].num > 0){
            datas[$(this).attr('index')].num--;
            //将localstorage中的数据重写
            localStorage.setItem('cart',JSON.stringify(datas));
            $(this).parent().find('.buynum').html(datas[$(this).attr('index')].num);
        }else{
            $('.jian').prop('disabled');
        }
    })
    }
    
    //鼠标按下快速减
    $('.jian').on('mousedown',(function(){
            $('.jian').off('click');
            let tt=0;
            time2 = setInterval(()=>{ 
                tt++;
                if(tt>40){
                    if(datas[$(this).attr('index')].num > 0){
                        datas[$(this).attr('index')].num--;
                        $(this).parent().find('.buynum').html(datas[$(this).attr('index')].num);
                    }else{
                        $('.jian').prop('disabled');
                    }
                }else return;
             },50)    
    }))
    //鼠标抬起停止
    $('.jian').on('mouseup',(function(){
        clearInterval(time2);
        //将localstorage中的数据重写
        localStorage.setItem('cart',JSON.stringify(datas));
        clickjian();
}))

购物车页面还未写完,目前的效果图:
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值