如何在初始 mousedown 事件后取消文本选择？答案

【问题标题】：How do I cancel a text selection after the initial mousedown event?如何在初始 mousedown 事件后取消文本选择？
【发布时间】：2010-09-11 22:35:33
【问题描述】：

我正在尝试实现一个基于单击并按住的弹出菜单，定位为（真正）缓慢的单击仍将触发默认操作，并设置延迟以使文本选择手势通常不会触发菜单。

我似乎不能做的是以一种不会首先阻止文本选择的方式取消文本选择：从事件处理程序返回 false（或调用 $(this).preventDefault()）会阻止用户完全选择，而明显的 $().trigger('mouseup') 根本不会对选择做任何事情。

这是在页面的一般上下文中，而不是特定于文本区域或其他文本字段。
e.stopPropogation() 不会取消文本选择。
我不希望阻止文本选择，而是希望在满足某些条件的情况下在短时间内否决它们。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

试试这个：

var input = document.getElementById('myInputField');
if (input) {
    input.onmousedown = function(e) {

        if (!e) e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

    }
}

如果没有，请阅读：

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

【讨论】：

问题是当我知道是否需要取消选择时，我已经不在事件的上下文中了。

【解决方案2】：

除了顶级线程之外，还有一种官方方法可以在 DOM 中实现我认为你想要的东西。您可以使用范围对象来代替事件。

考虑一下，（最终适用于 FF3）

window.onclick = 函数（evt） { // 检索选择并显示其内容 var selectObj = window.getSelection(); 警报（选择对象）； // 现在将选择折叠到选择的初始点 var rangeObj = selectObj.getRangeAt(0); rangeObj.collapse(true); }

不幸的是，这在 IE、Opera、Chrome 或 Safari 上并不适用；不知道为什么，因为在 Opera、Chrome 或 Safari 中，有一些与 collapse 和 getRangeAt 方法相关的东西。如果我知道更多，我会告诉你的。

对我之前的答案的更新，更通用的是选择对象和折叠、折叠开始、折叠结束方法。 (link text)

现在考虑上面的 2.0：

window.onmouseup = 函数（evt） { var selectObj = window.getSelection(); 警报（选择对象）； // 了解您选择的内容 // 适用于 FF3、Safari、Opera 和 Chrome selectObj.collapseToStart(); // 适用于 FF3、Safari、Chrome（但不适用于 Opera） /* selectObj.collapse(document.body, 0); */ // 由于代码是原生的，我不知道为什么... // ...这让我很难过 }

【讨论】：

【解决方案3】：

我不确定这是否会有所帮助，但这里有一些代码可以取消选择文本：

// onselectstart is IE-only
if ('undefined' !== typeof this.onselectstart) {
    this.onselectstart = function () { return false; };
} else {
    this.onmousedown   = function () { return false; };
    this.onclick       = function () { return true;  };
}

在此上下文中的“this”将是您要阻止文本选择的元素。

【讨论】：

【解决方案4】：

$(this).focus()（或类似于document.body.focus() 的任何东西）似乎可以解决问题，尽管我没有在 ff3 之外对其进行过多测试。

【讨论】：

【解决方案5】：

这个问题的答案对我有用： How to disable text selection using jquery?

（它不仅禁用，而且取消，任何文本选择。
至少在我的 FF 和 Chrome 计算机上。）

答案的作用如下：

    .attr('unselectable', 'on')

    '-ms-user-select': 'none',
    '-moz-user-select': 'none',
    '-webkit-user-select': 'none',
    'user-select': 'none'

    .each(function() {  // for IE
      this.onselectstart = function() { return false; };
    });

【讨论】：

【解决方案6】：

感谢 knight 提出了一个通用解决方案。这种轻微的修改还包括对 IE 7-10（可能还有 6）的支持。

我有一个与 cwillu-gmail 类似的问题。在特定的“设计”模式下，需要附加到 shift-click 事件（按住 shift 键的同时单击标签）以执行一些替代功能。（是的，听起来很奇怪，但这正是客户想要的。）这部分很简单，但有选择文本的烦人效果。这对我有用：（我使用了 onclick，但您可以使用 onmouseup .. 取决于您要做什么以及何时）

var element = document.getElementById("myElementId");
element.onclick = function (event)
{
    // if (event.shiftKey) // uncomment this line to only deselect text when clicking while holding shift key
    {
        if (document.selection)
        {
            document.selection.empty(); // works in IE (7/8/9/10)
        }
        else if (window.getSelection)
        {
            window.getSelection().collapseToStart(); // works in chrome/safari/opera/FF
        }
    }
}

【讨论】：

window.getSelection().collapseToStart() 运行但似乎不再取消 Chrome 中的选择...