Question

我试图在一个可信的div中识别游标的直接父（段落元素），如下所示：

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

如果我将.click事件绑定到'ce'div，则会将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');

为什么事件没有被触发，我怎样才能实现目标？

Answer 1

我不认为您可以从事件对象中获取元素，因为事件是在#base上触发的，因此#base是目标（而不是textnode或段落）。

您可以使用当前选择来获取事件发生时包含光标的容器（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/

这是一个处理选择的库。

获取keydown事件父元素，jQuery

1 个答案: