Как выбрать объект на основе позиции курсора?

Question

Я хочу привязать класс к объекту, основанному на позиции курсора.

Я понимаю основы range, и может получить/манипулировать выделенный текст, но я в недоумении, как я могу использовать курсор, чтобы прикрепить класс объекта, которого в данный момент.

Я мог бы добавить временный элемент в курсор, а затем перейти к родительскому элементу и добавить класс перед удалением временного элемента. Это действительно кажется грязным, хотя, и мне придется назначить что-то для его инициализации (сочетание клавиш или по keydown).

Любые идеи? Я искал вокруг, но не нашел ничего похожего на то, что я хочу.

Answer 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.