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

原始的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方法。

你可能感兴趣的:(javascript,javascript)