IE EDGE "pointer-events: none" not working on span tag

Question

In IE EDGE when pointer-events: none; is applied to a span tag it doesn't seem to be working, when adding a javascript click event the e.target is the span and not the parent.

HTML

<div class="parent>     
    <div class="child"><span class="the-span">Something in a span blah blah</span></div>
</div>

CSS

.child span {
  pointer-events: none;
}

JS

$(document).click(function(e) {
    console.info(e.target);
});

Full Codepen example: https://codepen.io/JoeHastings/pen/gWgzgK

Answer 1

It appears to be a confirmed issue with EDGE:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8295099/

To solve the issue in the meantime a block level element like a div can be used instead of span, or applying display: inline-block;, or some other block level display, to an inline element.