html - 处理按钮双击的默认行为

Question

我已经添加了一个 mouseup 事件监听器到一个跨度，它将通过 js 增加同级文本输入中的值...想想允许用户单击增加或减少 a 的箭头控件值(value)。问题:如果用户点击跨度太快，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