修复移动端点击videocard失效问题
This commit is contained in:
@@ -1046,10 +1046,6 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(
|
||||
onLoadingComplete={() => {
|
||||
setIsLoading(true);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowImageViewer(true);
|
||||
}}
|
||||
onError={(e) => {
|
||||
const img = e.currentTarget as HTMLImageElement;
|
||||
const doubanFallbackPoster =
|
||||
@@ -1094,8 +1090,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(
|
||||
WebkitUserSelect: 'none',
|
||||
userSelect: 'none',
|
||||
WebkitTouchCallout: 'none',
|
||||
pointerEvents: 'auto', // 改为auto以响应点击事件
|
||||
cursor: 'pointer', // 添加指针样式
|
||||
pointerEvents: 'none', // 海报点击交给卡片外层处理,确保点击播放
|
||||
} as React.CSSProperties
|
||||
}
|
||||
onContextMenu={(e) => {
|
||||
@@ -1162,8 +1157,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(
|
||||
) : (
|
||||
config.showPlayButton && (
|
||||
<div
|
||||
data-button='true'
|
||||
className='absolute inset-0 flex items-center justify-center opacity-0 transition-all duration-300 ease-in-out delay-75 group-hover:opacity-100 group-hover:scale-100'
|
||||
className='pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-all duration-300 ease-in-out delay-75 group-hover:opacity-100 group-hover:scale-100'
|
||||
style={
|
||||
{
|
||||
WebkitUserSelect: 'none',
|
||||
|
||||
@@ -126,7 +126,13 @@ export const useLongPress = ({
|
||||
|
||||
const onTouchEnd = useCallback(
|
||||
(e: React.TouchEvent) => {
|
||||
// 始终阻止默认行为,避免任何系统长按菜单
|
||||
// 只有本 hook 实际接管了触摸手势时才阻止浏览器默认 click。
|
||||
// 若 touchstart 命中 data-button 区域会提前 return,不应在 touchend 阶段
|
||||
// 再 preventDefault/stopPropagation,否则会吞掉外层卡片点击。
|
||||
if (!isActive.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleEnd();
|
||||
|
||||
Reference in New Issue
Block a user