我处理的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中，它是由子元素继承的，并且不允许选择元素包含的文本，即使该元素周围的文本已经被选中。
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
你也可以将这些样式应用到所有非ie浏览器和IE10的span上:
span.no_selection {
user-select: none; /* standard syntax */
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
一个简单的Javascript函数，使页面元素中的内容不可选:
function makeUnselectable(elem) {
if (typeof(elem) == 'string')
elem = document.getElementById(elem);
if (elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
}
我也有同样的问题。我通过切换到<a>和添加onclick="返回false;"(这样点击它就不会在浏览器历史记录中添加新的条目)。
顺风CSS:
<div class="select-none ...">
This text is not selectable
</div>
