JavaScript:跟踪Android上Firefox的选择变化

JavaScript: Tracking Selection Change on Firefox for Android

本文关键字：选择 变化 Firefox 跟踪 Android JavaScript      更新时间：2023-09-26

我正在寻找一种方法来跟踪网页上的文本选择。我需要一些代码在选择发生变化时执行。我在所有主流的桌面浏览器上都成功地做到了这一点，但在Android的Firefox上似乎行不通。

我尝试了三种方法(都没有成功!):

  1. 尝试捕捉"mouseup"事件并检查是否有非空文本选择。问题是"mouseup"没有得到在鼠标上下移动期间进行选择时触发序列!
  2. 尝试对"touchend"事件进行相同的操作-结果相同。
    3. 试图捕捉"selectionchange"事件。我发现它不是当选择更改时触发，因为它需要配置键"dom.select_events.enabled"要设置。这是默认的false，我显然不能要求我的访问者调整浏览器设置:-)

而且，正如预期的那样，如果通过拖动选择开始/结束标记来扩展或缩小选择，则不会触发前两个事件。

我现在能想到的唯一解决方案是一个定期轮询器(使用setInterval)，检查是否有一个文本选择。这绝对是不干净和反性能的。

任何替代方案和/或建议都会很有帮助。

1)本地文本选择事件

目前，轮询似乎是唯一的解决方法。然而，selectionchange事件目前实验性地在Firefox for Android Nightly中实现。可以通过设置dom.select_events.enabled标志为true(默认为false)来启用。

在夜间构建中，这个标志已经默认为true ，所以你有机会在几个月后正常使用它。

,

2)查找有效的事件

(未测试! !)

即使onselectstart还不能有效地在Android的Firefox中使用，唯一可行的简单解决方案就是轮询。

为了提高性能和降低成本，可以在窗口blur事件上启动轮询。因为无论何时用户进行选择，焦点都应该设置在(未经测试)。

window.addEventListener('blur', function(){
    // start polling for text selections
});

当焦点返回时，轮询可以停止。

window.addEventListener('focus', function(){
    // stop polling
});

要检查浏览器是否实际支持文本选择事件，您可以使用这个函数:

var browserSupportsTextSelectionEvents = function(){
    return !!('onselectstart' in document.body);
}

,

<标题> 3)黑客h1> 三个想法是通过CSS (-moz-user-select: none)禁用移动Firefox用户的文本选择，实现基于触摸开始和结束位置的自定义文本选择功能，并通过HTMLElement.setSelectionRange()将本地选择范围推回浏览器。
相关文章：