Within a parent div element, the pointer-events property is set to none. Inside this div, there is a span element with the contenteditable attribute set to true. Surprisingly, I can still edit the content of the span element in Chrome despite the pointer-events for the parent div being disabled.
Conversely, in Firefox, the behavior is as expected, and I am unable to edit the span's content.
You can view the result here
Here is the code snippet:
<style>
.item-disabled{
opacity: 0.3;
pointer-events: none;
}
.media, .media-body, .media-heading{
padding: 15px;
}
.list-unstyled{
padding-left: 0;
list-style: none;
margin-left: -5px;
}
</style>
<div class="item-disabled">
<li class="media">
<div class="media-body">
<div class="media-heading">
<ul class="list-unstyled">
<li><span contenteditable="true">Editable Span Content</span></li>
</ul>
</div>
</div>
</li>
</div>