如何在手机/平板浏览器（触摸屏）中启用css光标：指针（手形符号）

【问题标题】：How to enable css cursor:pointer (the hand symbol) in mobile/tablet browser (touch screen)如何在手机/平板浏览器（触摸屏）中启用css光标：指针（手形符号）
【发布时间】：2020-09-21 22:32:02
【问题描述】：

.HandSign{    
    cursor: pointer;
 }

以上 CSS 样式在桌面浏览器中工作得非常好。我想知道一旦我们在移动/平板浏览器中触摸相关控件，是否有任何方法可以显示手形符号。

【问题讨论】：

触摸背后的想法不是没有鼠标指针吗？我认为如果您需要为触摸设备创建一些自定义指针
它会被你的手指隐藏。这个要求的目的是什么？如果您希望触摸更加明显，那么有更好的方法来突出显示触摸的元素。
问题太不清楚了。

标签： javascript html jquery css accessibility

【解决方案1】：

我不确定是否只是在 CSS 中，但在 JS/jQuery 中可以通过创建一个元素来完成：

<span id='customPointer'><img source='pointer.png'></span>

CSS：

#customPointer{
    position: absolute;
    left: 0px;
    top: 0px;
    display: hidden;
}

然后使用 JS/jQuery 在每次点击时移动/显示元素。桌面和移动设备都触发了点击。：

$('body').onClick(function(event){
        setPointer(event);
    });

function setPointer(e){
    if(e.touches){
        $('#customPointer').css({'top': e.pageY, 'left': e.pageX, 'display': 'inline-block'});
    }
}

对此有几点说明：

触摸屏桌面可能表现异常
if(e.touches) 将确定它实际上是来自鼠标还是触摸屏，以防止它对真正的鼠标事件执行任何操作
您可能还想为 onmousemove 添加一些内容，以便在移动鼠标时将显示更改回隐藏。

【讨论】：