electron - Electron PPT助手浮窗：如何解决触摸屏上'mouseleave'和'mouseenter'事件延迟触发问题？

Question

问大佬们一个问题，我正通过electron实现一个PPT助手的浮窗，但我遇到了一些问题
我使用到了"mouseleave"和“mouseenter”两个事件

        controlBar.addEventListener('mouseenter', () => {
            window.api.function_PPTHelper("FOCUS");
        });
        controlBar.addEventListener('mouseleave', () => {
            window.api.function_PPTHelper("UNFOCUS");
        });

在使用鼠标时，我可以正常的进行所有操作
但我在触摸屏使用时发现，这两个事件均在我双击指定区域后才会触发
有没有其他方法能解决这个问题呢（？）

尝试使用了触摸屏事件，但这并不奏效，希望能得到好的解决方案以在触摸屏可自由直接的在两个层级间切换

Answer 1

尝试使用 Pointer Events

使用 pointerenter 和 pointerleave 事件

Answer 2

回答

在触摸屏设备上，mouseleave 和 mouseenter 事件的确可能会有延迟或者表现不如预期，因为这些事件是为鼠标设计的，而不是针对触摸操作。你可以尝试使用触摸事件来替代鼠标事件，如 touchstart 和 touchend，并且可能需要结合一些额外的逻辑来判断触摸是否在控制条区域内部。

下面是一个使用触摸事件替代鼠标事件的示例：

let isControlBarTouched = false;

controlBar.addEventListener('touchstart', (event) => {
    if (!isControlBarTouched) {
        isControlBarTouched = true;
        window.api.function_PPTHelper("FOCUS");
    }
});

controlBar.addEventListener('touchend', (event) => {
    // 可以加一个延时来判断是否是滑动事件
    setTimeout(() => {
        if (!controlBar.matches(':hover')) { // 这个是为了模拟鼠标离开效果，但在触摸设备上可能需要自定义逻辑
            isControlBarTouched = false;
            window.api.function_PPTHelper("UNFOCUS");
        }
    }, 100); // 延时时间可以根据实际情况调整
});

// 你可能还需要监听 touchmove 事件来判断触摸是否离开了 controlBar
controlBar.addEventListener('touchmove', (event) => {
    // 判断触摸点是否还在 controlBar 内部
    const touch = event.touches[0];
    const rect = controlBar.getBoundingClientRect();
    if (!(touch.clientX >= rect.left && touch.clientX <= rect.right && touch.clientY >= rect.top && touch.clientY <= rect.bottom)) {
        isControlBarTouched = false;
        window.api.function_PPTHelper("UNFOCUS");
    }
});

解释：

1. touchstart：当触摸开始时触发，如果当前没有被触摸（isControlBarTouched 为 false），则设为被触摸，并调用 FOCUS 函数。
2. touchend：当触摸结束时触发，通过设置一个延时（如 100 毫秒），判断是否真的离开了控制条（在触摸屏上，快速触摸可能导致 touchend 立即触发，但手指可能仍在控制条上方）。由于触摸事件没有直接的“离开”事件，我们结合 :hover 伪类（在触摸设备上可能不会工作）或者自定义逻辑来判断是否离开。
3. touchmove：如果触摸移动了，判断触摸点是否还在控制条内，如果不在，则设置 isControlBarTouched 为 false 并调用 UNFOCUS 函数。

这种方法不是完美的，因为它依赖于延时和一些额外的逻辑来模拟鼠标的 mouseenter 和 mouseleave，但在触摸屏设备上可能是最接近的解决方案。根据具体情况，你可能需要调整延时或逻辑。