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

JavaScript: Tracking Selection Change on Firefox for Android

我正在寻找一种方法来跟踪网页上的文本选择。只要选择发生变化,我就需要执行一些代码。我已经在所有主要的桌面浏览器上成功地做到了这一点,但在 Android.

的 Firefox 上似乎没有同样的效果

我尝试了三种方法(none 成功了!):

  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 默认情况下,我显然不能要求我的访问者调整浏览器设置:-)

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

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

任何替代方案 and/or 的建议都会很有帮助。

1) 本机文本选择事件

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

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

2) 查找有效的事件

(未测试!!)

即使 onselectstart 无法在 Firefox 中高效地用于 Android,唯一可行的简单解决方案是轮询。

为了提高性能和降低成本,可以在 window 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().

回到浏览器