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）如果与dblclick事件没有关系，那么它有什么用呢？我该如何预防？

3）如果是关于dblclick事件，我做错了吗？（顺便说一句，我想使用preventDefault()和cancelBubble = true以及stopPropagation()和return false都是一种矫枉过正。为了防止默认行为，我需要的最小代码是什么？）

4）任何其他想法如何获得理想的结果（双击不选择并突出显示文本）？

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

谢谢！

Answer 1

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

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

Answer 2

有同样的问题，我立即在 dblclick 处理程序中添加了 event.preventDefault（），它没有帮助。我没有考虑的是事件冒泡，而且默认行为是在子元素中触发，然后才在父元素中触发。

如果有一个有多个孩子的父母，您仍需要在其中选择文本，但又不想在双击时进行选择，有两种选择：

清除父级事件处理程序中的选择，例如： window.getSelection（）。empty（）。这种方法的问题在于，您会注意到所选文本的闪烁，并且在Opera中会弹出一个窗口（“复制”，“搜索”）。
遍历所有子级，并在其 dblclick 中调用 e.PreventDefault（）。

如何防止双击使用JavaScript突出显示网页文本？

2 个答案: