Блог

Я пытаюсь определить непосредственного родителя (элемент абзаца) курсора в редактируемом div, который выглядит следующим образом:

 <div id=base>
<div ce='1'  contenteditable='true'>
<p id='unique'>Paragraph one</p>
<p>Paragraph two</p>
</div>
</div>
 

Если я привязываю событие .click к div ‘ce’, то event.currentTarget сообщается как абзац, в котором происходит щелчок. Но для отслеживания курсора мне нужно использовать событие .keydown

 $('#base').on({ 
    keydown: function(event) {
        myLog(' nodeName: ' event.currentTarget.nodeName);
    },
// With the following selector the event is triggered with the cursor 
// anywhere in 'ce', and .currentTarget is the 'ce' div.
}, '[ce]');
// With this selector the event is never triggered regardless of cursor position
}, '#unique');
 

Почему событие не запускается и как я могу достичь своей цели?

Я не думаю, что вы можете получить элемент из вашего объекта event, поскольку событие запускается в #base, и поэтому #base является целью (а не текстовым узлом или абзацем).

Вы можете использовать текущее выделение, чтобы получить контейнер (textnode), который содержит курсор в момент возникновения события, и использовать этот контейнер для поиска абзаца.

Это может выглядеть так:

 $('#base').on({ 
  keydown: function(event) {
    // get current selection
    var selection = window.getSelection();
    if (selection.rangeCount === 1) {
      // get container of cursor
      var textnode = selection.getRangeAt(0).startContainer;

      // use jquery to get paragraph
      console.log($(textnode).parents('p'));
    }
  }
});
 

Это всего лишь очень простой (не кроссбраузерный) пример (протестирован в FireFox). Для реального кода вам пришлось бы выполнить еще несколько проверок, чтобы получить текущее положение курсора. Чтобы облегчить вам жизнь, вы могли бы взглянуть на rangy:

https://code.google.com/p/rangy/

Это библиотека, которая обрабатывает выборки.