Как получить фокус или событие нажатия клавиши внутри дочерних элементов div, установленного в contenteditable true?

Question

Я пытаюсь использовать делегирование событий внутри содержащего тега div, установленного на contenteditable. Для событий фокуса и нажатия клавиши событие захватывается элементом с contenteditable, установленным в true. Я хочу, чтобы элемент, на котором произошло событие, был возвращен. Есть ли возможность зарегистрировать событие в элементе, над которым вы фактически работаете, без привязки событий к каждому из них или установки каждого элемента в contenteditable = "true"? Если вы щелкнете по любому из элементов d1, он вернет элемент top, а не d1.

<div id="top" contenteditable="true">
<div id="d1">Edit</div>
<div id="d2">Edit</div>
<div id="d3">Edit</div>
</div>

window.onload=function(){
document.getElementById('top').addEventListener('focus',function(e){
  console.log(e.target);
},true);
}

Answer 1

Я не знаю, как это сделать в чистом js, но я знаю, что это можно сделать в jQuery с помощью .closest ()

Даже если вы не хотите использовать jQuery, вы можете выполнить поискза то, как это работает.Удачи!

Редактировать:

Я только что проверил код здесь, в Opera ... Не знаю, если это ошибка, сложно ... Ноиспользование 'click' вместо 'focus' заставит его правильно получить идентификатор внутреннего div

Взгляните:

<script type="text/javascript">
window.onload = function(){
  document.getElementById('top').addEventListener('click',function(e){
    alert(e.srcElement.id); //this alert d1 to d3
  },true);
document.getElementById('top').addEventListener('focus',function(e){
    alert(e.srcElement.id); //this alert top
  },true);
}
</script>

<div id="top" contenteditable="true">
      <div id="d1">Edit</div>
      <div id="d2">Edit</div>
      <div id="d3">Edit</div>
</div>