JavaScript：在 Firefox for Android 上跟踪选择更改

Posted 2023-03-06

【中文标题】JavaScript：在 Firefox for Android 上跟踪选择更改

【英文标题】：JavaScript: Tracking Selection Change on Firefox for Android

【发布时间】：2016-12-27 06:57:46

【问题描述】：

我正在寻找一种方法来跟踪网页上的文本选择。 I need some code to be executed whenever there is a change in selection.我已经在所有主要的桌面浏览器上成功地做到了这一点，但在 Firefox for android 上似乎并不适用。

我尝试了三种方法（都没有奏效！）：

尝试捕获"mouseup" 事件并检查是否存在 非空文本选择。问题是"mouseup" 没有得到 如果在 mousedown-move-up 期间进行了选择，则触发 顺序！ 尝试对 "touchend" 事件执行相同的操作 - 结果相同。 尝试捕获"selectionchange" 事件。我看到不是 triggered when the selection changes as it needs the config key "dom.select_events.enabled" 待设置。默认情况下这是false，我显然不能要求我的访问者调整浏览器设置:-)

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

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

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

【问题讨论】：

你在哪里将 mouseup 事件绑定到 body/document/html？尝试将它们组合起来。

刚刚在firefox mobile上测试过，确实没有触发任何事件>.>

您可以在选择开始时使用 mouseup 事件创建轮询器，然后在 X 秒内没有选择时移除轮询器。除了希望 selectionchange 事件很快成为默认值之外，想不出其他任何方法来解决这个问题：/

是的，这就是我现在正在做的事情。实际上，我在 mousedown 上启动轮询器，并在 3 秒内没有选择更改时将其清除。但是感觉很不干净。轮询器每 500 毫秒运行一次，幸运的是，到目前为止似乎并未影响性能。

【参考方案1】：

1) 原生文本选择事件

目前，轮询似乎是唯一的解决方法。 但是，selectionchange 事件 is currently experimentally implemented in Firefox for Android Nightly。可以通过将dom.select_events.enabled 标志设置为true（默认为false）来启用它。

在 Nightly 构建中，此标志已默认为 true，因此您有机会在几个月内正常使用它。

 

2) 查找有效的事件

（未测试！！）

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

为了提高性能和降低成本，可以在窗口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) 黑客攻击

第三个想法是通过 CSS (-moz-user-select: none) 禁用移动 Firefox 用户的文本选择，实现基于触摸开始和结束位置的自定义文本选择功能，并通过 HTMLElement.setSelectionRange() 将原生选择范围推回浏览器.

【讨论】：

是的，轮询似乎是目前唯一的出路，至少在稳定频道采用selectionchange 之前是这样。无论如何，感谢您关于何时启动/停止轮询器的效率相关输入。虽然我还没有测试它，但它看起来确实是前进的方向。谢谢。

我认为“Hacking”方法（3）是最有前途的。我无法尝试它，因为我没有 Android + Firefox 来测试它，但使用此解决方案不需要轮询。只需在touchend 事件之后挂钩window.getSelection()。如果通过 CSS 禁用用户选择，则会触发此事件。