如何根据光标位置选择对象？答案

【问题标题】：How can I select an object based on cursor position?如何根据光标位置选择对象？
【发布时间】：2014-01-05 06:05:50
【问题描述】：

我想根据光标位置将类附加到对象。

我了解range 的基础知识，并且可以获取/操作选定的文本，但我不知道如何使用光标将类附加到它当前所在的对象上。

我可能会在光标处添加一个临时元素，然后遍历父元素并在删除临时元素之前附加类。不过这看起来真的很乱，我必须分配一些东西来初始化它（键盘快捷键或keydown）。

有什么想法吗？我四处寻找，但没有找到任何我想要的东西。

【问题讨论】：

你可以尝试获取光标所在字符的 parentNode，应该是被包装的元素并且你正在寻找它的类
要求代码的问题必须表明对所解决问题的最低理解。包括尝试的解决方案、它们为什么不起作用以及预期的结果meta.stackexchange.com/questions/156810/…
@johnSmith 这让我走上了正轨。谢谢。
@AshleyMedway 是的，是的，但我想知道它是否可能，以及我可以使用什么方法来获得它。如果我有更好的想法（感谢 John，我现在做到了），显然我会发布一些代码。解决方案即将到来。

标签： javascript cursor range selection dom-traversal

【解决方案1】：

感谢约翰的领导和更合适的搜索词的结果，我发现了这个：

Javascript: Detect Carets Parent Node

要回答这个问题，这是如何完成的。

function getCursorParentNode()
{

  var target = null;
  if(window.getSelection)
  {
    target = window.getSelection().getRangeAt(0).commonAncestorContainer;
    return((target.nodeType===1) ? target : target.parentNode);
  }
  else if(document.selection)
  {
    var target = document.selection.createRange().parentElement();
  }
  return target;

}

然后，根据您的喜好对其进行初始化，例如：

$('.content').on('keydown',function(){

  var target = getCursorParentNode();
  target.className = 'red';

});

Here's a fiddle to demonstrate.

【讨论】：

请注意，上述方法将替换对象已分配给它的任何现有类，因此我最终将target包装为一个jQuery对象并使用addClass