如何识别包含用户所选文本的div？

Question

我试图在用户选择的文字旁边放置一个按钮，如下所示：

但是，我只想在选择位于具有类floatbtnable的div内的文本时放置它。例如：

<div class='foo'><!--The floating button doesn't show up if user selects text that is in here --></div>
<div class='floatbtnable'><!--If the user selects text that is in here, the floating button shows up next to user selection. --></div>

注意：我已经想出如何在用户选择旁边放置一个按钮，我只想添加一个过滤器，使按钮只显示特定类别的选定文本而不是所有时间。

Answer 1

如何找到这样的。

$(window.getSelection().focusNode.parentNode).closest('.floatbtnable').length

window.getSelection()有一个名为focusNode的属性，其中包含一个名为parentNode的属性。我想你可以利用那个属性。

注意：不确定浏览器兼容性。

Answer 2

您可以使用window.getSelection获取所选文字。这适用于所有现代浏览器，但不适用于Internet Explorer 8或更低版本[1]。您可以使用它来查找所有选定文本元素的共同祖先。如果您从此创建jQuery对象，则可以使用$.closest方法查看是否存在类floatbtnable的祖先。

var selection = window.getSelection()
var commonAncestor = selection.getRangeAt(0).commonAncestorContainer
var isSelectable = $(commonAncestor).closest('floatbtnable').length !== 0;

有关实施，请参阅http://codepen.io/ckuijjer/pen/bNeMWr。如果您在黄色背景中选择文本（它也不应该选择文本，它将显示在选定的文本<textarea>中，其他文本选择将不会。我在身体上使用了一个mouseup事件作为触发器

[1]如果您需要支持旧版浏览器，请参阅Get the Highlighted/Selected text了解解决方案

Answer 3

获取函数中所选内容的父节点，并将其类与匹配值匹配，即floatbtnable