javascript - 拖动元素而不选择其他元素

Question

我有系统来拖动元素(点)和 map 。当我拖动点并且鼠标光标移动速度快于新点渲染时，则选择 map 图像。

我想跳过此效果，但无法将此图像移动到背景，因为我还需要拖动此元素。

我使用 ReactJS，但这在本例中并不重要。

提前感谢您的帮助。

Answer 1

您可以通过编程方式使用user-select: none .

或者，只需重写选择:

.unselectable::-moz-selection {
  background: transparent; /* Gecko Browsers */
}

.unselectable::selection {
  background: transparent; /* WebKit/Blink Browsers */
}

.us-none {
  -webkit-user-select: none;
  user-select: none;
}

.pe-none {
  pointer-events: none;
}

<p>NORMAL! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam et explicabo iusto nemo nihil. Dicta dignissimos eius itaque nemo vero? Consequuntur ducimus hic ipsum nemo nesciunt, quia recusandae sapiente voluptate!</p>

<p class=unselectable>UNSELECTABLE! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam et explicabo iusto nemo nihil. Dicta dignissimos eius itaque nemo vero? Consequuntur ducimus hic ipsum nemo nesciunt, quia recusandae sapiente voluptate!</p>


<p class="us-none">USER SELECT NONE! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam et explicabo iusto nemo nihil. Dicta dignissimos eius itaque nemo vero? Consequuntur ducimus hic ipsum nemo nesciunt, quia recusandae sapiente voluptate!</p>

<p class="pe-none">POINTER EVENTS NONE! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam et explicabo iusto nemo nihil. Dicta dignissimos eius itaque nemo vero? Consequuntur ducimus hic ipsum nemo nesciunt, quia recusandae sapiente voluptate!</p>

pointer-events: none使文本在 Chrome 上仍然可选