contenteditable=false inside contenteditable=true block is still editable in IE8

I was stuck with the same problem today and after trying for a while figured a solution that works for me on IE. Add a click event listener to the child contenteditable element. In the event handler do as below

 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });
 
 

<div class="simulated-icon"><span>Icon text</span></div>

As you can see here returning false on the click event listener for the child content editable tells IE to not allow the edit. This works if there is a click event on the parent node and we check if the target child node is clicked in the event listener. Good luck.

Okay, I already have discovered the answer much like how Penicillin was discovered.

You see, playing around with this code, I mistakenly set contenteditable to true for the span and voila! It worked!

So, to make a span NON-contenteditable inside a contenteditable div, you just set its contenteditable attribute to true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Here's the file to demonstrate (use IE8 to open it): https://codepen.io/hgezim/pen/qMppLg .

Lastly, I didn't post the question to get votes (although, they wouldn't hurt!), but since the solution was so ridiculous and I didn't find it here, I thought someone may find this tip time saving.

The problem with contenteditable="true" inside contenteditable="true" (to make it not editable) on IE is that double clicking on the inner element makes it editable

Solution

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

the contents of child tag will not be editable for sure

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

JSFiddle example