JavaScript:适用于Android的Firefox跟踪选择更改

Question

我正在寻找一种方法来跟踪网页上的文本选择.每当选择发生变化时,我都需要执行一些代码.我已经在所有主流桌面浏览器上成功完成了这项工作,但同样似乎并不适用于Android版Firefox.

我尝试了三种方法(没有一种方法有效!):

尝试捕获"mouseup"事件并检查是否存在非空文本选择."mouseup"如果在mousedown-move-up序列中进行了选择,问题就不会被触发!
尝试对"touchend"事件做同样的事情 - 结果相同.
试图抓住这个"selectionchange"事件.我看到当选择改变时它不会被触发,因为它需要设置配置键 "dom.select_events.enabled".这是false默认情况下,我显然不能要求我的访问者调整浏览器设置:-)

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

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

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

谢谢

Answer 1

1) 原生文本选择事件

目前，民意调查似乎是唯一的解决方法。不过，该selectionchange事件目前正在 Firefox for Android Nightly 中实验性实现。dom.select_events.enabled可以通过将标志设置为true（默认为）来启用它false。

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

（未经测试！！）

即使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);
}

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