在突出显示和取消突出显示文本时,使用javascript管理mousedown事件

时间:2012-01-05 08:03:19

标签: javascript javascript-events mouseup

天儿真好,

我一直在努力处理用户处理突出显示的文本的逻辑。我在http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html找到了Mark Koli的一个很好的例子。

我在http://jsfiddle.net/metalskin/43c8h/8/

创建了一个工作示例

我遇到特定实例的代码问题如下:

  1. 选择一些文字。
  2. 对话框出现。
  3. 关闭对话框。
  4. 现在单击而不拖动以清除突出显示的文本。
  5. 对话框出现。
  6. 关闭对话框。
  7. 取消选择文字。
  8. 在我的逻辑中,我没有使用对话框(这只是一个例子),我正在插入带有图像的div,以允许用户执行操作。

    问题是第二次点击确实是为了清除文本,但由于某种原因,浏览器在浏览器清除文本之前触发了鼠标按钮事件(无论如何都在firefox下)。对话框弹出这显然不是问题,但是根据我的逻辑,我最终会添加多个div,因此在文本上会有多个浮动图像。

    是否有某种方法可以确定该事件是否会导致突出显示的文本被删除?理想情况下,我希望在浏览器清除文本后触发事件。

    提前致谢(对不起,如果有一个新问题,我在谈到javascript时非常粗糙)。

    :编辑:

    我应该解释一下我如何使用它的用例。

    1. 用户突出显示页面上的文字
    2. 一个图标出现在他们刚刚释放鼠标按钮的位置,突出显示文本
    3. 用户选择图标,打开一个表单以输入一些细节以标记突出显示的文本(此时此图标已被删除)
    4. 用户提交表单(ajax),表单关闭。
    5. 显示
    6. 页面,突出显示的文本现在未突出显示(但添加了额外的标记)。
      1. 用户突出显示页面上的文字
      2. 一个图标出现在他们刚刚释放鼠标按钮的位置,突出显示文本
      3. 用户点击页面上的其他位置以删除突出显示的文本并删除图标。
      4. 用户提交表单,表单关闭。
      5. 当选择图标时,我选择的文本被取消选择时没有问题,但问题是如果他们点击页面的另一部分,它会重新激活鼠标事件,从而双重图标(或对话框时它在提供的例子中是不合适的。

1 个答案:

答案 0 :(得分:0)

在这里你去^ _ ^

http://jsfiddle.net/43c8h/16/

我刚刚更改了这段代码,以清除鼠标注册事件的选择。

if (selectedText != '') {
    alert("You selected:\n" + selectedText + "\n");
    window.getSelection().removeAllRanges();
}

或者,如果您想在用户选择文本后突出显示文本,您可以使用相同的 window.getSelection()。removeAllRanges(); 代码调用mousedown函数以清除选择每次点击鼠标。