如何使用JavaScript防止双击高亮网页文本？

Question

在我的HTML页面上有一个带有一些文本的元素。当该元素被点击时，我分配了一个动作。当用户连续多次点击该元素时，有时会发生双击，导致文本被选中（高亮），从而损坏外观。我尝试使用虚拟事件处理程序来防止双击（dblclick）事件的默认行为，但似乎并没有起作用。似乎在执行我的虚拟事件处理程序之前，文本就已经被选中和高亮了。

function doNothing(event) {
  alert('doNothing'); // Added for debugging. The alert is shown, meaning the event handler is invoked. When I get the alert, the text is already highlighted.
  if(!event) event = window.event;
  if(event.preventDefault) event.preventDefault();
  event.cancelBubble = true;
  if(event.stopPropagation) event.stopPropagation();
  return false;
}

myElem.onlick = doSomething; // This is the event for a single click. Works well.
myElem.ondblclick = doNothing; // The event handler is called, but the text is already highlighted.

具体问题：

1）我所需要的内容是否与双击事件有关？（由于在触发警报时文本已经被高亮显示，我怀疑可能是另一种机制。我猜想单击事件的默认行为可能与此有关，但我也取消了单击事件的默认行为。）

2）如果它与双击事件无关，那么它与什么有关？如何防止它发生？

3）如果它与双击事件有关，我是否做错了什么？（顺便说一句，我想使用所有的preventDefault()、cancelBubble = true、stopPropagation()和return false，这是否有些过度？为了防止默认行为，我需要的最少代码是什么？）

4）还有其他方法可以实现所需的结果（双击不选择和高亮文本）吗？

我正在使用FF 11进行测试（但最终需要跨浏览器解决方案）。

谢谢！

- Tom

---

简单地使文本不可选择不是一个选项吗？解决方案可以使用jQuery吗？ - Elliot Bonneville

请查看selectstart事件。 - Musa

你可以使用CSS来实现这个功能。参考链接 - RobG

@ElliotBonneville：我认为不允许用户选择文本是用户体验失败。 - Michael Scheper

Answer 1

myElem.onmousedown = function(e) {
    e.preventDefault()
}

编辑：将其从返回false更改为e.preventDefault，这仍将允许单击事件触发。

- Andy Ray

---

我给了这个+1，但不应该。它在IE 8及以下版本中“工作”，因为onmousedown监听器会抛出一个错误，这是不太理想的。而且，这不是适当的事件 - 如果支持的话，应该使用selectstart。无论如何，可以使用CSS来完成。 - RobG

它似乎在IE10以下的浏览器中不支持-ms-user-select？（未经测试） - Andy Ray

是的，但在标记中添加unselectable属性：“unselectable =” on“”或DOM属性：element.unselectable = true;将覆盖这些情况，避免使用侦听器。 - RobG

哦，如果需要监听器，在IE和Opera中可以使用以下代码： if (typeof el.onselectstart != 'undefined') {el.onselectstart = function(){return false;};el = null;} - RobG

Answer 2

我遇到了同样的问题，立即在dblclick处理程序中添加了event.preventDefault()，但没有起作用。我没有考虑到事件冒泡和在子元素中触发默认行为之前在父元素中触发默认行为。

如果有一个带有多个子元素的父元素，您仍然需要在其中选择文本，但不希望双击时发生选择，则有两个选项：

1. 在父元素的事件处理程序中清除选择，例如：window.getSelection().empty()。这种方法的问题是您会注意到所选文本的闪烁，在Opera中会出现弹出窗口（“复制”，“搜索”）。
2. 遍历所有子元素并在它们的dblclick中调用e.PreventDefault()。

- Maxim Saplin