onkeyup отправляет родительский элемент?

Question

Проблема в том, что, если я сфокусируюсь на элементе childOfroot и нажму клавишу, сработавший элемент является его родительским, но предполагается, что он сам.

function test(event, element) {
  console.log($(element).attr('id'))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="root" contenteditable="true" onkeyup="test(event, this)">
  This is changable
  <span contenteditable="true" onkeyup="test(event, this)" id="childOfroot"> | including this</span>
</span>

См. Демонстрацию здесь: https://jsfiddle.net/s36L8bpj/

Answer 1

Для тех, у кого возникла такая же проблема, очевидно, что вы не можете отправить собственное событие элемента, если родительский элемент имеет contenteditable="true".

Поэтому я изменил свою структуру ниже:

<span id="root" contenteditable="false" >
 <span contenteditable="true" onkeyup="test(event, this)" id="childOfroot0">This is changable
 <span contenteditable="true" onkeyup="test(event, this)" id="childOfroot1"> | including this</span>
</span>

Мир вам:)