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

Question

我正在寻找一种方法来跟踪网页上的文本选择。只要选择发生变化，我就需要执行一些代码。我已在所有主流桌面浏览器上成功完成此操作，但在 Firefox for Android 上似乎不起作用。

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

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

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

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

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

Answer 1

1) 原生文本选择事件

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

在 Nightly builds 中，这个标志已经默认为 true，所以你有机会在几个月内正常使用它。

2) 找到有效的事件

(未经测试!!)

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

为了提高性能和降低成本，可以在窗口 blur 事件上启动轮询。因为每当用户进行选择时，焦点都应该离开视口(viewport)(虽然未经测试)。

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() 将 native 选择范围返回给浏览器。