在手机上按住按钮时如何防止附近的文本选择？

Posted 2023-03-06

【中文标题】在手机上按住按钮时如何防止附近的文本选择？

【英文标题】：How to prevent nearby text selection when pressing and holding a button on mobile?

【发布时间】：2021-05-18 17:13:21

【问题描述】：

我有一个应用程序，用户需要按住一个按钮来录制音频。但是，当用户在移动设备上按住按钮时，浏览器会尝试选择附近的文本（因为用户正在按住手指）。这是有道理的，但我想防止这种情况发生。

当我在文本中添加user-select: none 时，它不再被选中，而是被选中了更高级别的文本。有没有办法在按钮级别完全捕获这个“用户选择事件”并防止它冒泡到附近的文本？我最终在我的 DOM 树上追逐 user-select: none 事件，这感觉不正确。

这是我的按钮 html：

<Button onMouseDown=onMouseDown onMouseUp=onFinish onMouseLeave=onFinish className=classes.button onTouchStart=onMouseDown onTouchEnd=onFinish>
            <div className="flex items-center relative">
                <svg height=radius * 2 width=radius * 2>
                    <circle stroke="rgba(0,0,0,0.1)" fill="transparent" strokeWidth=stroke r=normalizedRadius cx=radius cy=radius transform=`rotate(-90 $radius $radius)` />
                    <circle
                        stroke="black"
                        fill="transparent"
                        strokeWidth=stroke
                        strokeDasharray=circumference + ' ' + circumference
                        style= strokeDashoffset 
                        r=normalizedRadius
                        cx=radius
                        cy=radius
                        transform=`rotate(-90 $radius $radius)`
                    />
                </svg>
                <Mic className="absolute" style=
                    left: '50%',
                    top: '50%',
                    transform: 'translate(-50%, -50%)',
                    fontSize: '80px'
                />
            </div>
        </Button>
        <div className="flex flex-col items-center justify-center px-3">
            <div className="font-bold mb-1 text-center">
                Click and hold to record your greeting.
            </div>
            <div className="text-center">(Max. 10 seconds)</div>
        </div>

onMouseDown 或onTouchStart 事件触发事件，所以我想知道是否可以利用这些事件“取消”用户选择以防止选择按钮外的文本？

    const onMouseDown = async (e: React.MouseEvent | React.TouchEvent) => 
        onStart();
        setIsMicPressed(true)
    

感谢您的指导！

【问题讨论】：

你试过this回答吗？

这正是用户在下面添加的答案（是的，我有）

【参考方案1】：

你可以尝试添加这个css：

.noselect 
  -webkit-touch-callout: none; /* ios Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

然后你可以在文本中添加noselect 类

【讨论】：

是的 - 这就是我在问题中所述添加的内容，但现在它只选择上方下一个 dom 级别的文本