javascript - 在移动设备上点击按钮时如何摆脱这些暗区

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