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

I'm trying to implement a pop-up menu based on a click-and-hold, positioned so that a (really) slow click will still trigger the default action, and with the delay set so that a text-selection gesture won't usually trigger the menu.

我正在尝试实现一个基于点击并按住的弹出菜单,其位置使得(实际)慢点击仍然会触发默认操作,并设置延迟以便选择文本选择手势通常会触发菜单。

What I can't seem to do is cancel the text-selection in a way that doesn't prevent text-selection in the first place: returning false from the event handler (or calling $(this).preventDefault()) prevents the user from selecting at all, and the obvious $().trigger('mouseup') doesn't doesn't do anything with the selection at all.

我似乎无法做的是以一种不妨碍文本选择的方式取消文本选择:从事件处理程序返回false(或调用$(this).preventDefault())阻止用户根本没有选择,显而易见的$()。触发器('mouseup')根本不对选择做任何事情。

This is in the general context of a page, not particular to a textarea or other text field.

这是在页面的一般上下文中,而不是特定于textarea或其他文本字段。

e.stopPropogation() doesn't cancel text-selection.

e.stopPropogation()不取消文本选择。

I'm not looking to prevent text selections, but rather to veto them after some short period of time, if certain conditions are met.

我不打算阻止文本选择,而是在一段短时间后否决它们,如果满足某些条件。

6 个解决方案

#1

Try this:

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

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

    }
}

And if not, have a read of:

如果没有,请阅读:

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

#2

In addition to the top thread, there is an official way to implement what I think you want in DOM. What you can use in lieu of events is something called a range object.

除了*线程之外,还有一种官方方式可以实现我认为你想要的DOM。你可以用来代替事件的东西叫做范围对象。

Consider, (which works definitively on FF3)

考虑一下(最终在FF3上工作)

window.onclick = function(evt)
{
   // retrieves the selection and displays its content
   var selectObj = window.getSelection();
   alert(selectObj);

   // now collapse the selection to the initial point of the selection
   var rangeObj = selectObj.getRangeAt(0);
   rangeObj.collapse(true);
}

Unfortunately, this doesn't quite fly with IE, Opera, Chrome, or Safari; not sure why, because in Opera, Chrome, or Safari, there is something associated with the collapse and getRangeAt methods. If I know more, I'll let you know.

不幸的是,这与IE,Opera,Chrome或Safari并不相关;不确定原因,因为在Opera,Chrome或Safari中,有一些与collapse和getRangeAt方法相关的东西。如果我知道更多,我会告诉你。

An update on my previous answer, one that works more universally is the selection object and collapse, collapseToStart, collapseToEnd methods. (link text)

我之前的答案更新,一个更普遍的工作是选择对象和折叠,collapseToStart,collapseToEnd方法。 (链接文字)

Now consider the 2.0 of the above:

现在考虑上面的2.0:


window.onmouseup = function(evt)
{
   var selectObj = window.getSelection();
   alert(selectObj); // to get a flavor of what you selected

   // works in FF3, Safari, Opera, and Chrome
   selectObj.collapseToStart();

   // works in FF3, Safari, Chrome (but not opera)
   /* selectObj.collapse(document.body, 0); */

   // and as the code is native, I have no idea why...
   // ...and it makes me sad
}

#3

I'm not sure if this will help, exactly, but here is some code to de-select text:

我不确定这是否会有所帮助,但是这里有一些取消选择文本的代码:

// 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" in this context would be the element for which you want to prevent text selections.

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

#4

$(this).focus() (or anything along the lines of document.body.focus()) seems to do the trick, although I haven't tested it much beyond ff3.

$(this).focus()(或者是document.body.focus()中的任何内容)似乎都可以解决这个问题,尽管我没有在ff3之外测试它。

#5

An answer to this question works for me: How to disable text selection using jquery?

这个问题的答案对我有用:如何使用jquery禁用文本选择?

(It not only disables, but also cancels, any text selection.
At least on my computer in FF and Chrome.)

(它不仅可以禁用,还可以取消任何文本选择。至少在我的计算机上使用FF和Chrome。)

Here is what the answer does:

这是答案的作用:

    .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

Thanks to knight for the beginnings of a universal solution. This slight modification also includes support for IE 7-10 (and probably 6).

感谢骑士为通用解决方案的开始。这种轻微的修改还包括对IE 7-10(可能是6)的支持。

I had a similar prob as cwillu-gmail.. needed to attach to the shift-click event (click on label while holding shift key) to perform some alternate functionality when in a specific "design" mode. (Yeah, sounds weird, but it's what the client wanted.) That part was easy, but had the annoying effect of selecting text. This worked for me: (I used onclick but you could use onmouseup.. depends on what you are trying to do and when)

我有一个与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
        }
    }
}

#1