Question

当我双击文本“五”时，所有其他元素也会被选中。例如复制/粘贴结果为“ OneTwoThreeFourFive”。而且他们甚至都不会轻易被取消选择！

如何避免这种多文本选择行为？

      .App {
        position: relative;
        text-align: center;
        height: 3em;
        width: 20em;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        top: 0;
        height: 3em;
        width: 5em;
        background-color: darkseagreen;
        border: 1px solid green;
        pointer-events: none;
      }
      .one {
        left: 0;
      }
      .two {
        left: 5em;
      }
      .three {
        left: 10em;
      }
      .four {
        left: 15em;
      }
      .five {
        left: 20em;
      }

    <div class="App">
      <div class="item one">One</div>
      <div class="item two">Two</div>
      <div class="item three">Three</div>
      <div class="item four">Four</div>
      <div class="item five">Five</div>
    </div>

Answer 1

在Chrome中使用浮点数时，这似乎是一个问题-浮点数会删除项目之间的空格，以便所有文本一起运行。

您可以删除浮点数，并在父级上设置display:flex或在子级div中添加空格。无论哪种方式，都不要在项目上使用pointer-events:none;，因为那样一来，您只能与父级进行交互。

.App {
        position: relative;
        text-align: center;
        height: 3em;
        width: 20em;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        top: 0;
        height: 3em;
        width: 5em;
        background-color: darkseagreen;
        border: 1px solid green;        
      }
      .one {
        left: 0;
      }
      .two {
        left: 5em;
      }
      .three {
        left: 10em;
      }
      .four {
        left: 15em;
      }
      .five {
        left: 20em;
      }

<div class="App">
      <div class="item one">One </div>
      <div class="item two">Two </div>
      <div class="item three">Three </div>
      <div class="item four">Four </div>
      <div class="item five">Five </div>
    </div>

Answer 2

我刚刚遇到了这个问题，我通过将display: inline-table放在我的item元素上来解决了这个问题。

      .App {
        position: relative;
        text-align: center;
        height: 3em;
        width: 20em;
        box-sizing: border-box;
      }
      .item {
        position: absolute;
        top: 0;
        height: 3em;
        width: 5em;
        background-color: darkseagreen;
        border: 1px solid green;
        display: inline-table;
      }
      .one {
        left: 0;
      }
      .two {
        left: 5em;
      }
      .three {
        left: 10em;
      }
      .four {
        left: 15em;
      }
      .five {
        left: 20em;
      }

    <div class="App">
      <div class="item one">One</div>
      <div class="item two">Two</div>
      <div class="item three">Three</div>
      <div class="item four">Four</div>
      <div class="item five">Five</div>
    </div>

显然，将元素置于表格模式足以暗示Chrome元素中的文本与周围的文本是分开的。还有其他一些技巧也可以使用，例如：

  .item:before {
    content: "";
    display: block;
  }

（在项目的开头放置一个不可见的换行符）

Answer 3

请检查此codepen链接。我更改了一些CSS代码

  .item {
    float:left;
    height: 3em;
    width: 5em;
    background-color: darkseagreen;
    border: 1px solid green;
    display:block;
  }

防止在doubleclick上选择多个html元素

3 个答案: