我处理的dblclick事件在跨度在我的web应用程序。双击的副作用是,它选择了页面上的文本。我怎样才能阻止这种选择的发生呢?


当前回答

对于那些正在寻找Angular 2+解决方案的人。

您可以使用表单元格的按下鼠标输出。

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

和阻止如果详细> 1。

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

dblclick输出继续按预期工作。

其他回答

如果您试图完全阻止通过任何方法以及仅双击选择文本,您可以使用user-select: none css属性。我已经在Chrome 68中进行了测试,但根据https://caniuse.com/#search=user-select,它应该可以在其他当前正常的用户浏览器中工作。

从行为上看,在Chrome 68中,它是由子元素继承的,并且不允许选择元素包含的文本,即使该元素周围的文本已经被选中。

在纯javascript中:

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

或者使用jQuery:

jQuery(element).mousedown(function(e){ e.preventDefault(); });

顺风CSS:

<div class="select-none ...">
  This text is not selectable
</div>

我也有同样的问题。我通过切换到<a>和添加onclick="返回false;"(这样点击它就不会在浏览器历史记录中添加新的条目)。

FWIW,我将user-select: none设置为那些我不希望在双击父元素的任何地方时以某种方式被选中的子元素的父元素。它确实有效!很酷的是contentteditable ="true",文本选择等仍然适用于子元素!

就像:

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>