双击时禁用文本选择

时间:2012-03-10 14:07:49

标签: javascript gwt double-click

我正在使用一个将有两个RichTextAreas的GWT应用程序。在每一个中都会有相同的句子,但是用不同的语言。当用户点击某个单词时,它将与其他RichTextArea中的对应关系一起突出显示。当用户双击单词而不是单词时,他们的块将被突出显示。因为双击事件永远不会被提出(我不知道为什么)我创建了自己的类,它扩展了RichTextArea并且我自己提出了双击事件(取决于两次点击之间经过的时间)。

问题是我无法禁用默认文本选择。我一直在寻找可能的解决方案,但我没有发现任何实际工作。我尝试过使用CSS和JavaScript。这就是我班级的样子:

public class MyRichTextArea extends RichTextArea
{
    private boolean clickedOnce = false;
    private int msDelay = 250;

    public MyRichTextArea()
    {
        sinkEvents(Event.ONMOUSEDOWN);
                disableTextSelectInternal(this.getElement());
    }

    public void onBrowserEvent(Event event)
        {
        switch (DOM.eventGetType(event))
        {
            case Event.ONMOUSEDOWN:
                if (!clickedOnce)
                {
                    clickedOnce = true;
                    Timer t = new Timer() 
                    {
                        public void run() 
                        {
                            if (clickedOnce)
                            {
                                clickedOnce = false;
                                raiseEvent(1);
                            }
                        }
                    };
                    t.schedule(msDelay);
                }
                else
                {
                    clickedOnce = false;
                    raiseEvent(2);
                }
                //DOM.eventPreventDefault(event);
                break; 

        }
    }

    public void raiseEvent(int clickCount)
    {
        if (clickCount == 1)
        {
            this.fireEvent( new GwtEvent<ClickHandler>() 
                {
                    public com.google.gwt.event.shared.GwtEvent.Type<ClickHandler> getAssociatedType() 
                    {
                        return ClickEvent.getType();
                    }

                    protected void dispatch(ClickHandler handler) 
                    {
                        handler.onClick(null);
                    }
                });
        }
        else
        {
            this.fireEvent( new GwtEvent<DoubleClickHandler>() 
                    {
                        public com.google.gwt.event.shared.GwtEvent.Type<DoubleClickHandler> getAssociatedType() 
                        {
                            return DoubleClickEvent.getType();
                        }

                        protected void dispatch(DoubleClickHandler handler) 
                        {
                            handler.onDoubleClick(null);
                        }
                    });
        }
    }

    protected native static void disableTextSelectInternal(Element e)
    /*-{
            e.ondrag = function () { return false; };
            e.onselectstart = function () { return false; };
            e.onmousedown = function () { return false; }
            e.style.MozUserSelect="none"
    }-*/;
}

我从这里选择了这个方法:http://comments.gmane.org/gmane.org.google.gwt/49564,但它对我不起作用。我想这必须用JavaScript来完成。我是JavaScript的新手,我不知道从哪里开始。如果有人之前遇到过这个问题或有任何可能的解决方案,我们将不胜感激。

提前致谢

1 个答案:

答案 0 :(得分:2)

我相信你正在寻找CSS标签。它们如下:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

为了通过java将它们实现到你的对象中,你需要找到这样的东西:

MyRichTextArea myRichTextArea = new MyRichTextArea();
myRichTextArea.getElement().setAttribute("style",
    myRichTextArea.getElement().getAttribute("style") +
" -webkit-touch-callout: none;" +
" -webkit-user-select: none;" +
" -khtml-user-select: none;" +
" -moz-user-select: none;" +
" -ms-user-select: none;" +
" user-select: none;");

这将上面的CSS附加到已经设置的元素CSS中。希望这是你正在寻找的答案!