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

Question

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

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

1. 尝试捕获"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 构建中，此标志已默认为 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() 将原生选择范围推回浏览器.