高亮显示和取消高亮显示文本时，使用javascript管理mousedown事件

Manage mousedown events with javascript when highlighting and unhighlighting text

本文关键字：高亮 显示 管理 javascript mousedown 事件 使用 取消 文本      更新时间：2023-09-26

我一直在研究一些逻辑来处理用户高亮显示的文本。我在http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.

我在以下位置创建了一个工作示例：http://jsfiddle.net/metalskin/43c8h/8/

我对一个特定实例的代码有一个问题，如下所示：

  1. 选择一些文本
  2. 对话框出现
  3. 关闭对话框
  4. 现在单击而不拖动以清除高亮显示的文本
  5. 对话框出现
  6. 关闭对话框
  7. 文本被取消选择

在我的逻辑中，我不使用对话框（作为一个例子，这更容易），我插入了一个带有图像的div，以允许用户执行操作。

问题是，第二次点击实际上是为了清除文本，但由于某种原因，浏览器在清除文本之前启动了鼠标向上事件（无论如何，在Firefox下都是如此）。这显然不是弹出对话框的问题，但根据我的逻辑，我最终会添加多个div，并在文本上添加多个浮动图像。

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

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

  1. 用户突出显示页面上的文本
  2. 一个图标出现在他们刚刚释放鼠标按钮以突出显示文本的位置
  3. 用户选择图标，该图标将打开一个表单，输入一些详细信息以标记突出显示的文本（此时图标将被删除）
  4. 用户提交表单（ajax），表单关闭
  5. 页面显示，高亮显示的文本现在不高亮显示（但添加了额外的标记）

或

  1. 用户突出显示页面上的文本
  2. 一个图标出现在他们刚刚释放鼠标按钮以突出显示文本的位置
  3. 用户单击页面上的其他位置以移除突出显示的文本和移除图标
  4. 用户提交表单，表单关闭

当选择图标时，我对所选文本被取消选择没有问题，但问题是，如果他们点击页面的另一部分，它会重新激活鼠标事件，从而双击图标（或者在提供的示例中不合适时会出现对话框）。

给你^_^

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

我刚刚更改了这段代码，以清除鼠标向上事件上的选择。

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

或者，如果你想在用户选择文本后保持高亮显示，你可以用相同的window.getSelection（）.removeAllRanges（）调用mousedown函数每次单击鼠标时清除所选内容的代码。

相关文章：