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

Question

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

当我将

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)
    }

感谢您的指导！

Answer 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

类添加到文本中

Answer 2

在此链接中您可以看到针对各种浏览器的解决方案。只需设置CSS代码如下：w3

.prevent-select {
 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
 }