onkeyup sends parent element?

Question

The problem is that if I focus on the childOfroot element and press a key, the element triggered is it's parent yet it is supposed to be itself.

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>

See demo here: https://jsfiddle.net/s36L8bpj/

This is similar to your question so check it out https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event — Mohamad Fazel Hesari, May 04 '20 at 18:37
@Rory that doesn't work, unless you call the id or something like `$('id')` — whocaresz, May 05 '20 at 01:16
Nesting of contenteditables causes weird things with events. The inside element is not going to see them. — epascarello, May 05 '20 at 17:48

score 0 · Answer 1 · answered May 05 '20 at 17:41

For those who is having the same problem, apparently you cant send the element own event if the parent element have contenteditable="true".

So I changed my structure to below:

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

Peace be upon you :)

onkeyup sends parent element?

1 Answers1