单击事件和双击事件同时存在的处理办法

原始的ondblclick方法在执行完两次onclick方法后执行。

所以,如果用该方法,则在click事件中要判断是否是因为双击事件触发的,一般的方法通过setTimeout,即click方法内的代码延迟执行,在执行前判断ondblclick是否执行了,如果已经执行了则不再执行click中的代码。

function CClick() {
    var lastClickTime = 0;
    var delay = 200;
    var status = 0; // 0:click、dbclick事件执行结束了,1:触发了click事件,2:click事件正在执行,3:dbClick事件正在执行
    var timeTask;

    this.click = function() {
        // click、dbClick事件正在执行
        if(status === 2 || status === 3) {
            return;
        }

        var cur = new Date().getTime();
        // 两次点击事件的间隔时间小于delay,则认为是双击事件
        if(status === 1 && (cur - lastClickTime) < delay) {
            dbclick();
            return;
        }

        status = 1;
        clearTimeout(timeTask); // 如果上一次的click正在执行中,则取消上次的任务。
        timeTask = setTimeout(function() {
            // click事件还未执行完毕或者dbClick正在执行
            if(status === 2 || status === 3) {
                return;
            }
            status = 2;
            // do something
            status = 0
        }, delay);
    };

    var dbclick = function() {
        // dbClick事件还未执行完毕
        if(status === 3) {
            return;
        }
        status = 3;
        // do something
        status = 0;
    };
}

使用方法:
对每一个需要操作的元素初始化一个CClick对象,然后在onClick中调用click方法。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值