拖动元素而不是选择其他元素

Question

我有拖动元素（点）和地图的系统。当我拖动点并且鼠标光标移动得比新点渲染更快时，则选择地图图像。

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

我使用的是ReactJS，但在这种情况下这并不重要。

提前感谢您的帮助。

Answer 1

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

或者，只需重写<div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div>：

selection

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

pointer-events: none使文字仍可在Chrome上选择