javascript - 在 contenteditable div 中获取子 div 的 id

Question

<div class="pad" id="test" contenteditable="true" spellcheck="false">
       <div id="a0" class="fif" > text0</div>
       <div id="a1" class="fif" >text1</div>
       <div id="a2" class="fif" >text2</div>
     </div>

在上面的代码中有一个contenteditable div，里面有一些子div。我需要一个 jQuery 来返回我正在键入 的子 div 的 id。例如如果我正在编辑 text1 它应该给我(返回)"a1"。

如果我使用，它会按预期工作

var clicked;
$('#test').click(function(event){
   clicked = $(event.target);
   alert(clicked.attr('id'));
});`

如图所示

http://jsfiddle.net/bernie1227/cK69Q/ (即点击它返回 id="a1") 但如果我使用它不会以类似的方式工作

var clicked;
$('#test').keypress(function(event){
   clicked = $(event.target);
   alert(clicked.attr('id'));
});

如图所示http://jsfiddle.net/hari_OM/bLgkv/ 即输入时返回“id=test”而不是“id=a1”

我尝试使用 event.target.id 和 $(this).attr("id") 但它们返回 id="test" 而不是 id="a1" ，但我需要得到 "a1"。我还尝试在子 div 中注入(inject) onkeypress="funcname(this.id)" 并从定义的函数中检索它，但它不起作用。

Answer 1

我已经编写了一个依赖于跟踪事件目标的解决方案，使用 event.target: http://jsfiddle.net/bernie1227/cK69Q/