回答
在触摸屏设备上,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");
}
});
解释:
- touchstart:当触摸开始时触发,如果当前没有被触摸(
isControlBarTouched
为 false
),则设为被触摸,并调用 FOCUS
函数。 - touchend:当触摸结束时触发,通过设置一个延时(如 100 毫秒),判断是否真的离开了控制条(在触摸屏上,快速触摸可能导致
touchend
立即触发,但手指可能仍在控制条上方)。由于触摸事件没有直接的“离开”事件,我们结合 :hover
伪类(在触摸设备上可能不会工作)或者自定义逻辑来判断是否离开。 - touchmove:如果触摸移动了,判断触摸点是否还在控制条内,如果不在,则设置
isControlBarTouched
为 false
并调用 UNFOCUS
函数。
这种方法不是完美的,因为它依赖于延时和一些额外的逻辑来模拟鼠标的 mouseenter
和 mouseleave
,但在触摸屏设备上可能是最接近的解决方案。根据具体情况,你可能需要调整延时或逻辑。
尝试使用 Pointer Events
使用 pointerenter 和 pointerleave 事件