JavaScript 禁止双击选择答案

【问题标题】：JavaScript suppress double click selectionJavaScript 禁止双击选择
【发布时间】：2011-01-26 07:58:51
【问题描述】：

我目前正在制作幻灯片库。我的问题是，当我非常快速地单击导航 div 时，会触发浏览器的默认行为（内容选择）。

我的问题是：如何抑制默认的双击行为？

navigationDiv.onclick = function () {
  // do something
};

jQuery 解决方案也很合适，因为我正在使用它。

提前致谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$("yourselector").dblclick(function(){
    return false;
});

您也可以使用event.preventDefault()

$("yourselector").dblclick(function(event){
    event.preventDefault();
});

【讨论】：

我似乎无法正常工作。事件触发正常，但 return false 和 event.preventDefault() 语句实际上都没有阻止 Firefox 双击选择内容。

【解决方案2】：

仅供参考，在 Firefox 和 Safari/Chrome 中，也可以通过 CSS 禁用选择：

.navigationDiv {
    -moz-user-select: none;             
    -webkit-user-select: none;  
}

我认为当您的目的只是防止在某个元素上发生选择时，这会更简单。

【讨论】：

【解决方案3】：

您可以尝试禁用目标元素的 onselectstart 事件。

navigationDiv.onselectstart=function(){return false}

不确定这是否与 x 浏览器兼容。（我会检查它）

编辑
原来这是一个仅限 IE 的事件。要在 Mozilla 中完成相同的操作，您必须禁用 -moz-user-select CSS 样式。在 JavaScript 中是：

navigationDiv.style.MozUserSelect="none"

说实话，我认为您最好禁用双击事件，如此处其他 cmets 所述。

【讨论】：

唯一的问题是如果用户真的想使用点击拖动突出显示选择某些东西，你也取消了那个动作。
是的。出于这个原因，我自己不会使用它，但是如果所有其他方法都失败了，它是一个选项。
sweet，navigationDiv.style.MozUserSelect="none" 结合返回 false，现在可以在所有浏览器中使用！谢谢！

【解决方案4】：

将return false; 放在事件处理程序的末尾应该能够抑制默认选择行为。

【讨论】：

好吧，它适用于所有浏览器，在 Firefox 中接受...知道为什么吗？
navigationDiv.style.MozUserSelect="none" 在 Firefox 中修复了它

【解决方案5】：

在 dblclick 处理程序中调用 event.preventDefault() 只有在被点击的元素中调用它才会有帮助，而不是在父事件处理程序中调用。

在有多个子容器的情况下，双击的默认行为将发生在子容器中并冒泡到其父容器。在这种情况下，有 2 个选项：

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

【讨论】：

【解决方案6】：

您可以尝试让“dblclick”事件返回 false 吗？

 $('.someStuff').bind('dblclick', function() { return false; });

【讨论】：

【解决方案7】：

取消ondblclick事件：

navigationDiv.ondblclick = function () { 
  return false;  // cancel default
};

http://www.quirksmode.org/js/events_mouse.html

【讨论】：

copy：好的，在所有浏览器中都可以使用，在 Firefox 中接受...知道为什么吗？
检查我的回答为什么....return false 不适用于 Mozilla 引擎。相反，停止执行事件而不是函数。

【解决方案8】：

很简单：

navigationDiv.ondblclick = function (event) {
  // do something
  if (!event) event = window.event;
        if (event.preventDefault) 
            event.preventDefault();
        else 
            event.returnValue = false;

};

这适用于 IE 和 Mozilla 浏览器。

【讨论】：

【解决方案9】：

e.preventDefault() 和 return false 都不能确保在所有情况下都不会发生双击的默认操作（文本选择）。但是，在阅读了 this note 和 this answer 之后，我已经为自己的类似问题编写了一个可行的解决方案：

$(...your selector...)
    .on('mousedown',function(e){ if (e.detail>1) return false }) // prevent dblclick default
    .on('dblclick', ...your dblclick handler...);

【讨论】：