Skip to content

播放器双击全屏时会触发click事件。dblclick事件和click事件会冲突 #861

@DevilSpiderX

Description

@DevilSpiderX

对播放器双击展开全屏的时候,播放器会触发click事件,并暂停(播放)正在播放(暂停)的视频。
看了一下源码发现:

    let clickTimes = [];
    events.proxy($video, 'click', (event) => {
        const now = Date.now();
        clickTimes.push(now);
        const { MOBILE_CLICK_PLAY, DBCLICK_TIME, MOBILE_DBCLICK_PLAY, DBCLICK_FULLSCREEN } = constructor;

        const clicks = clickTimes.filter((t) => now - t <= DBCLICK_TIME);
        switch (clicks.length) {
            case 1:
                art.emit('click', event);

                if (isMobile) {
                    if (!art.isLock && MOBILE_CLICK_PLAY) {
                        art.toggle();
                    }
                } else {
                    art.toggle();
                }
                clickTimes = clicks;
                break;
            case 2:
                art.emit('dblclick', event);

                if (isMobile) {
                    if (!art.isLock && MOBILE_DBCLICK_PLAY) {
                        art.toggle();
                    }
                } else {
                    if (DBCLICK_FULLSCREEN) {
                        art.fullscreen = !art.fullscreen;
                    }
                }
                clickTimes = [];
                break;
            default:
                clickTimes = [];
        }
    });

case 1的部分没有做类似防抖的功能,是不是可以改成类似这样:

    let clickTimes = [];
    let timeoutId = undefined;
    events.proxy($video, 'click', (event) => {
        const now = Date.now();
        clickTimes.push(now);
        const { MOBILE_CLICK_PLAY, DBCLICK_TIME, MOBILE_DBCLICK_PLAY, DBCLICK_FULLSCREEN } = constructor;

        const clicks = clickTimes.filter((t) => now - t <= DBCLICK_TIME);

        switch (clicks.length) {
            case 1:
                timeoutId = setTimeout(()=>{
                    timeoutId = undefined;
                    art.emit('click', event);

                    if (isMobile) {
                        if (!art.isLock && MOBILE_CLICK_PLAY) {
                            art.toggle();
                        }
                    } else {
                        art.toggle();
                    }
                }, DBCLICK_TIME);
                
                clickTimes = clicks;
                break;
            case 2:
                if (timeoutId !== undefined) {
                    clearTimeout(timeoutId);
                    timeoutId = undefined;
                }

                art.emit('dblclick', event);

                if (isMobile) {
                    if (!art.isLock && MOBILE_DBCLICK_PLAY) {
                        art.toggle();
                    }
                } else {
                    if (DBCLICK_FULLSCREEN) {
                        art.fullscreen = !art.fullscreen;
                    }
                }
                clickTimes = [];
                break;
            default:
                clickTimes = [];
        }
    });

在触发dblclick事件时,把还没触发的click事件给取消掉,防止两个事件冲突。

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions