在移動設備上點擊按鈕時如何擺脫這些黑暗區域

Question

源代碼在這里： https : //codesandbox.io/s/hony-quekr

演示： https : //quekr.csb.app/

該按鈕本身是一個span元素。 這是相關的代碼片段。

import React, { Component } from "react";
import posed from "react-pose";
import "./Choice.css";

const config = {
  visible: {
    opacity: 1,
    y: 0,
    delay: 100
  },
  hidden: {
    opacity: 0,
    y: 8,
    delay: 200,
    transition: {
      duration: 200
    }
  }
};
const Underline = posed.div(config);

class Choice extends Component {
  constructor() {
    super();
    this.state = {
      isVisible: false
    };
  }

  componentDidMount() {
    this.setState({ isVisible: this.props.visibility });
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState({ isVisible: this.props.visibility });
    }
  }

  render() {
    return (
      <span
        className="word"
        onMouseEnter={() => this.props.onMouseEnter()}
        onMouseLeave={() => this.props.onMouseLeave()}
        onClick={() => this.props.onClick()}
      >
        {this.props.name}
        <Underline
          className="underline"
          pose={this.state.isVisible ? "visible" : "hidden"}
        />
      </span>
    );
  }
}

問題在於移動設備，當在移動設備上查看頁面時，單擊（輕擊）按鈕時，每個按鈕周圍都會出現一個暗區。 我已附上一張圖片進行演示。

我想擺脫這些黑暗的區域，以便在您點擊這些按鈕時什么都不會發生，除了下划線顯示出來

Answer 1

試試這個CSS：

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    
}