Question

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

我尝试添加dblclick事件来捕获事件并运行preventDefault（），stopPropagation（）或返回false。然而，没有任何作用。我还添加了-user-select：none; css对附近物品的规则。但是，浏览器只是跳过这些并找到要突出显示的其他内容。关于如何防止这种行为的任何想法？

Answer 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

Answer 2

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

我在这里发布了一个JSFiddle。

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

处理按钮上的默认行为双击

2 个答案: