处理按钮双击的默认行为答案

【问题标题】：Handling default behavior on button double-click处理按钮双击的默认行为
【发布时间】：2011-08-16 16:19:15
【问题描述】：

我已将mouseup 事件侦听器添加到跨度中，它将增加通过 js 输入的同级文本中的值...想想允许用户单击增加或减少值的箭头控件。问题：如果用户点击跨度太快，Safari/Chrome 会将其解释为双击并开始选择附近的项目并将它们呈现在蓝色框下。这些浏览器中必须有一个默认行为，即双击时自动选择附近的文本作为便利功能。

我尝试添加一个dblclick 事件来捕获该事件并运行preventDefault()、stopPropagation() 或返回false。但是，没有任何效果。我还在附近的项目中添加了-user-select: none; CSS 规则。但是，浏览器只是跳过这些并找到其他要突出显示的内容。关于如何防止这种行为的任何想法？

【问题讨论】：

标签： html css google-chrome safari dom-events

【解决方案1】：

在你定义的双击事件回调中，设置你想要点击的对象为焦点。 https://developer.mozilla.org/en/DOM/element.focus

编辑：另外，尝试在短时间内而不是立即调用焦点。

下面概述了一种替代方法：

<script type="text/javascript">
    function test() {
        // something
    }
</script>

<style type="text/css">

span::selection,
span *::selection {
    background: transparent;
}
span {
    -moz-user-select: none;
    -khtml-user-select: none;
}

</style>

<span>surrounding text <a href="#" onclick="test(); return false;">Link</a> more text</span>

双击超链接不会导致选择周围的文本。另外，请参阅此问题以了解删除选择的 js 函数：

Prevent text selection after double click

【讨论】：

不错。这行得通。谢谢。对我来说，最小超时是 500 毫秒。所以附近的物体周围仍然有蓝色闪光。但这比全蓝色叠加层要好。
我找到了另一个目前运行良好的解决方案...bytes.com/topic/javascript/answers/…

【解决方案2】：

在上面的评论中找到链接后，我能够找到解决方案。这个想法......将点击事件附加到按钮并检查其“详细信息”属性以获取点击总数。如果用户点击两次以上，调用 clearSelection 清除“selection”DOM 元素。我还可以为特定的文本块添加一个类，将选定的背景样式设置为透明以防止闪烁。

我在这里发布了一个 JSFiddle。

http://jsfiddle.net/vince/Ts85n/

【讨论】：