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