你如何在div的子集中获得焦点或按键事件才能满足真实性？

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中执行此操作，但我知道可以使用.closest（）

在jQuery中完成

即使您不想使用jQuery，也可以搜索它的工作原理。祝你好运！

修改

我刚刚在Opera中测试了代码......不知道它是不是一个bug，很难......但是使用'click'代替'focus'会使它正确获取内部div的id

看看：

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