onClick 或 onTouchEnd 不适用于 iOS，但适用于桌面

Question

我正在创建一个网站，我需要在页面上显示不同的产品卡并提供 URL。我在桌面浏览器中进行了测试，无论是内部链接还是外部链接，onClick 都会正确触发，但当我在移动设备上测试页面时，它在 iOS 17 或更高版本中根本不起作用。有人可以帮我吗？

下面是我的反应组件的代码：

import openExternalIcon from '../assets/images/link-external.svg'
import Button from 'react-bootstrap/Button';
export default function ProjectCard({id="dummy", project="dummy", description="dummy", image="dummy", url=""}){

    function handleClick(target){
        if(target){
            window.open(
                target,
                "_blank",
            )
        }
    }

    function handleTouch(target, event){
        event.preventDefault();
        if(target){
            window.open(
                target,
                "_blank",
            )
        }
        
    }

    return(
        <>  
            <div className='project-card d-flex flex-column position-relative desktop' id={id} onClick={()=>handleClick(url)} onTouchEnd={(e) => handleTouch(url, e)} >
                <a href={url} className="mobile" />
                <div className="p-lg-4 p-3 project-image">
                    <img src={image} alt="project images" width="100%" />
                </div>
                <div className="p-lg-4 p-3 project-details">
                    <h3 className="text-white">{project}</h3>
                    <p className="project-description">{description}</p>
                </div>
                {
                    url ? 
                        <Button 
                            type="submit"
                            className='btn-lg open-externally d-flex justify-content-center align-items-center'
                        >
                            <img src={openExternalIcon} alt="externally open link" className='align-self-center'/>
                        </Button>
                        :
                        ''
                }
            </div>      
        </>
    )
}

Answer 1

不要以编程方式处理触摸事件，而是考虑使用移动设备的标准

<a>

标签。这可确保兼容性并在浏览器的安全设置中更自然地处理用户交互。 然后你可以给锚标签赋予相同的div样式

这是一个例子：

<a href={url} target="_blank" className="classes">
{/*content*/}
<a/>