Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
DevilSpiderX opened this issue Nov 5, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@DevilSpiderX
Copy link

DevilSpiderX commented Nov 5, 2024

对播放器双击展开全屏的时候,播放器会触发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事件给取消掉,防止两个事件冲突。

@zhw2590582 zhw2590582 added the bug Something isn't working label Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants