Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants